mass Framework draggable插件
这个插件一再延期，花了我几周的时间，参考了不少实现，终于实现得比jQuery ui的draggable还强大。之所以说它强大，是因为支持多点拖动（同时能拖动多个方块），并支持事件代理方式监听以后可能出现的拖动块。
请等博客左上角的FLASH时钟动画出现后才进行拖动。你可以一个个拖动它们，也可以单击它们当中的某些，让它们变成绿色后，进行多点拖动。
更多的例子请见github上的文档我在github的文档，那里有十来个例子，如一格格地拖动，按沿着图的轨迹拖动，生成幽灵元素进行影子拖动，通过手柄进行拖动，区域拖动，应有尽有……
draggable文档：$.fn.draggable(settings)
参数：
settings 可选。用于配置控件对象。但当这个对象第二次调用它时， 只有当其第一个参数为字符串或对象才有效，这样相当于调用其方法或重写一些属性。返回值：
mass实例
settings的配置参数：
containment ：规定拖动块可活动的范围。有五种情况. 如果是一个CSS表达式，将会通过选择器引擎找到第一个符合它的那个元素节点。 如果是一个mass的节点链对象,取得其第一个元素。 如果是一个元素节点，取其左上角与右下角的坐标。 如果是一个包含四个数字的数组，分别是[x1,y1,x2,y2] 如果是这三个字符串之一：parent,document,window，顾名思义，parent就是其父节点， document就是文档对象，取其左上角与右下角的坐标。 noCursor ：boolean 默认false。拖动时我们基本都会给个标识说明它能拖动，一般是改变其光标的样式为move，但如果不想改变这个样式， 或者你自己已经用图标做了一个好看的光标了，那么就设置它为true吧。 live ：boolean 如果为true，则使用事件代理。 lockX ：boolean 默认false。当值为true时，锁定X轴，只允许上下移动。 lockY ：boolean 默认false。当值为true时，锁定Y轴，只允许左右移动。 handle ：string 手柄的类名，当设置了此参数后，只允许用手柄拖动元素。 ghosting ：boolean 默认false。当值为true时，会生成一个幽灵元素，拖动时只拖动幽灵，以减轻内存消耗。 此幽灵元素拥有一个名为mass_ghosting的类名，半透明。 rewind ：boolean 默认false。当值为true时，让拖动元素在拖动后回到原来的位置。。 strict ：boolean 默认true。当值为true时，监视鼠标的位置，一旦超过出拖动块就立即停止。 scroll ：boolean 默认false。当值为true时，允许滚动条随拖动元素移动。 click ：function 默认为false。当我们点击页面时依次发生的事件为mousedown mouseup click 但有时我们想在点击后做一些事情才拖动元素，这时就需要将click设置为false，意即阻止浏览器的默认行为 dragstart ：function 在拖动前鼠标按下的那一瞬执行。 drag ：function 在拖动时执行。 dragend ：function 在拖动后鼠标弹起的那一瞬执行。 addClasses ：boolean 是否为正在拖动的元素添加一个叫mass_dragging的类名，它会在拖动结束自动移除，默认是true。 duration ：Number 当ghosting或rewind为true，它会执行一个平滑的动画到目的地，这是它的持续时间，默认是500ms。drag, dragstart, dragend这三个都是HTML5标准的原生事件名称。
生成拖动对象拥有以下属性：
lockX: 锁定X轴 lockY: 锁定Y轴 multi: ArrayLike, 一个节点数组或节点集合，你可以在dragstart时设置它;比如:
$( ".blue" ).draggable({ //每次用户只能拖动一个
dragstart: function (e, dd){
dd.multi = $( '.red' ); //但程序能帮你带上这几个移动
}
});
意思是在拖动当前那 1 个蓝色的方块的同时,顺带拖动 所有 匹配.red类名的红色方块元素。 startX:Number, mousedown事件发生时得到的event.pageX; startY:Number, mousedown事件发生时得到的event.pageY; originalX:Number, mousedown事件发生时元素相对于页面的X坐标; originalY:Number, mousedown事件发生时元素相对于页面的Y坐标; deltaX :Number,当前鼠标与startX的距离 deltaX :Number,当前鼠标与startY的距离 offsetX:Number, mousemove事件发生时元素相对于页面的X坐标; offsetY:Number, mousemove事件发生时元素相对于页面的Y坐标; target:当前元素。通过点击选中一起要拖动的方块，再拖动它们。
先
点
击
我
，
变
成
鲜
绿
色
再
拖
动
我
们
$.require( "ready,more/draggable" , function (){
$( ".drag" ).click( function (){
$( this ).toggleClass( "selected" );
}).draggable({
dragstart: function (e, dd){
dd.multi = $( '.selected' );
}
});
});
mass Framework在github上的地址
作者： Leo_wl
出处： http://HdhCmsTestcnblogs测试数据/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于mass Framework draggable插件的详细内容...