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上的地址

来源：https://www.cnblogs.com/rubylouvre/archive/2012/04/11/2441646.html

标签

draggable