drag.move.md.svn-base

一款开源强大的javascript控件

Class: Drag.Move {#Drag-Move}
=============================

Drag类的功能加强类. 

从[Drag][]类中继承了所有的方法, 属性, 可选项及事件.

### 备注:

Drag.Move 需要页面使用[标准模式](http://hsivonen.iki.fi/doctype/)的DOCTYPE


Drag.Move 方法: constructor {#Drag-Move:constructor}
-------------------------------------------------

### 语法:

	var myMove = new Drag.Move(myElement[, options]);

### 参数:

1. el      - (*element*) 目标元素的id或引用
2. options - (*object*, 可选)  Drag类的可选项, 以及如下可选项:

### 可选项:

* container  - (*element*) 如果指定了该容器元素, 则目标拖动范围被限制在该容器元素的范围中
* droppables - (*array*) 可拖动元素可拖放入的一系列元素. drop, enter, leave这三个事件将在与这些元素产生交互的时候进行关联.

### 事件:

* drop  - 松开拖动的元素时触发. 本元素以及松开时所在的元素将作为参数传入监听函数.
* leave - 当可拖动元素脱离dropables中指定的元素时触发
* enter - 当可拖动元素进入dropables中指定的元素时触发

### 示例:

	var myDrag = new Drag.Move('draggable', {
		
		droppables: '.droppable',
		
		onDrop: function(element, droppable){
			if (!droppable) {
				console.log(element, ' dropped on nothing');
			}
			else {
				console.log(element, 'dropped on', droppable);
			}
		},
		
		onEnter: function(element, droppable){
			console.log(element, 'entered', droppable);
		},
		
		onLeave: function(element, droppable){
			console.log(element, 'left', droppable);
		}
		
	});

### 备注:

- Drag.Move 需要页面使用[标准模式](http://hsivonen.iki.fi/doctype/)的DOCTYPE
- Drag.Move 既可支持position为absolute, 也支持position为relative. 如果预先未在元素上指定它的position, 则将自动设置为absolute

### 演示:

* Drag.Cart - <http://demos.mootools.net/Drag.Cart>
* Drag.Absolutely - <http://demos.mootools.net/Drag.Absolutely>
* DragDrop - <http://demos.mootools.net/DragDrop>

### 另参考:

- [Drag][]



Drag.Move 方法: stop {#Drag-Move:stop}
-------------------------------------------------

调用本方法时, 将先检查元素是否在一个可droppable的元素上, 如果是, 则触发drop事件; 否则, 触发emptydrop事件.

最后, 将调用父类Drag的stop方法.


### 语法:

	myMove.stop();

### 示例:

	var myElement = $('myElement').addEvent('emptydrop', function(){
		alert('no drop occurred');
	});

	var myMove = new Drag.Move(myElement, {
		onSnap: function(){ // 由于继承了[Drag][], 所以[Drag][]的事件在Drag.Move中都可用
			this.moved = this.moved || 0;
			this.moved++;
			if(this.moved > 1000){
				alert("You've gone far enough.");
				this.stop();
			}
		}
	});

### 另参考:

- [Drag:stop][]



Native: Element {#Element}
==========================


Element 方法: makeDraggable {#Element:makeDraggable}
------------------------------------------------------

让元素获得拖拽移动的功能

### 语法:

	var myDrag = myElement.makeDraggable([options]);

### 参数:

1. options - (*object*, 可选) 参见[Drag][]和[Drag.Move](#Drag-Move)的可选项

### 返回值:

* (*object*) Drag.Move实例

### 示例:

	var myDrag = $('myElement').makeDraggable({
		onComplete: function(){
			alert('done dragging');
		}
	});

### 另参考:

- [Drag][], [Drag.Move](#Drag-Move)



[$]: /Element/Element/#dollar
[Drag]: /Drag/Drag/#Drag
[Drag:stop]: /Drag/Drag/#Drag:stop
[Element:getPosition]: /Utilities/Dimensions/#Element:getPosition