它的使用和我们见过的其他的插件类似：首先你使用“new”关键字来创建一个Drag.Move对象并赋值给一个变量，然后你再定义你的选项和事件。这就是全部要做的事情，不过你一定要注意一下下面的例子中描述的IE的CSS怪异现象。
基本用法
Drag.Move
创建你自己的拖动对象非常的容易。稍微看一下下面的例子就行了。注意一下我们是怎么把我们的Drag.Move对象的选项和事件从我们的Drag选项和事件中分离出来的。Drag.Move类扩展了Drag类，因此它可以接受Drag类的选项和事件。今天我们并不打算特别地讲一讲Drag类，不过我们还是要研究一下一些有用的选项和事件。看一下下面的代码，然后学习一下其中的细节。
参考代码：
复制代码 代码如下:
var myDrag = new Drag.Move(dragElement, {
// Drag.Move的选项
droppables: dropElement,
container: dragContainer,
// Drag的选项
handle: dragHandle,
// Drag.Move 的事件
// Drag.Move事件会传递拖动的元素，
// 还有可接纳拖动元素的元素（droppable）
onDrop: function(el, dr) {
// 显示拖动到可接纳元素的元素的id
alert(dr.get('id'));
},
// Drag事件
// Drag事件传递拖动的元素
onComplete: function(el) {
alert(el.get('id'));
}
});
在这里我们稍微打断一下……
Drag.Move选项
Drag.Move选项有两个很重要的元素：
droppables——设置可接纳的（droppable）元素的选择器（这个元素将会注册拖动相关的事件）
container——设置拖动元素的容器（可以保证元素一直在容器内）
设置这个选项非常的容易：
参考代码：
复制代码 代码如下:
// 这里我们通过id定义了一个元素
var dragElement = $('drag_element');
// 这里我们通过class定义了一组元素
var dropElements = $$('.drag_element');
var dragContainer = $('drag_container');
// 现在创建我们的Drag.Move对象
var myDrag = new Drag.Move(dragElement , {
// Drag.Move选项
// 把我们上面定义的droppable赋值给droppables
droppables: dropElements ,
// 把我们的容器元素变量赋值给容器
container: dragContainer
});
现在你的可接受拖动元素的元素就包含进来了，你就有了一个可以接受拖放元素的类。
Drag.Move事件
这个事件可以让你在不同的点去触发一个函数，比如当你开始拖动一个对象或者你准备放下它。每一个Drag.Move事件都将传递拖动元素和接受拖动元素的元素（我们一直叫做droppable）作为参数。
onDrop——这个事件将在一个可拖动的元素放到一个接受拖动元素的元素里面时触发。
onLeave——这个事件将在一个可拖动的元素离开一个接受拖动元素的元素时触发。
onEnter——这这个事件将在一个可拖动的元素进入一个接受拖动元素的元素时触发。
这些事件中的每一个事件都将调用一个函数，每个函数都将在相应的事件触发时调用。
参考代码：
复制代码 代码如下:
var dragContainer = $('drag_container');
var myDrag = new Drag.Move(dragElement , {
// Drag.Move选项
droppables: dropElements ,
container: dragContainer ,
// Drag.Move事件
// Drag.Move函数将传递可拖动的元素（这个例子中是'el'）
// 还有接受拖动元素的元素（这个例子中是'dr'）
onDrop: function(el, dr) {
// 下面这句的意思大概是：
// 如果你拖动的元素不是到了可以接受拖动元素的元素的范围内
if (!dr) {
// 什么都不做
}
// 否则（从逻辑上讲，
// 如果你拖动的那个的元素到了可接受拖动元素的元素范围内）
// 做这一件事件
else {
// 在这里做一些事情
};
},
onLeave: function(el, dr) {
// 这个事件将在拖动的元素离开可接受拖动对象的元素时触发
},
onEnter: function(el, dr) {
// 这个事件将在拖动的元素进入可接受拖动对象的元素时触发
}
});
一些Drag事件和选项
对于Drag，有许多选项和事件，不过这里我们只看一小部分。
snap——选项
snap选项可以让你设置用户的鼠标至少移动多少个像素后开始拖动。默认是6，你额可以设置为任何数字或者值为数字的变量。很明显，这里有一些合理的限制（比如设置snap为1000将毫无用处），但是这在定制你的用户体验时将会派上用场。
参考代码： [复制代码] [保存代码]
var myDrag = new Drag.Move(dragElement , {
// Drag选项
snap: 10
});
handle——选项
handle可以给你的拖动元素添加一个控制对象。这个控制对象将成为唯一的可以接受“抓取”（拖动）的元素，从而允许你使用其他的元素做一些其他的事情。要设置一个控制对象，只需调用这个元素就可以了。
参考代码：
复制代码 代码如下: