Draggable(拖动)即实现页面元素的拖动效果。

一、加载方式

1.css样式加载：

<divid="box"class="easyui-draggable">内容部分</div>

使用css样式加载Draggable，方便快捷，但是不利于管理，所以我们有课第二种加载方式，使用Jquery方式加载，一般我们都会使用Jquery的方式进行加载。

2.Jquery方式加载：

//不加属性$('#box').draggable();//JS部分$('#box').draggable({revert:true,//拖动后是否回到起始位置，boolean类型cursor:'text',//鼠标拖拽样式，十字，文本等handle:'#pox',//句柄，设置后只在设置后只能在当前元素下实现拖拽disabled:false,//设置是否可以被拖拽edge:50,//设置边界往内多大距离可以实现拖拽axis:'v',//设置拖拽方向，v：垂直拖拽，h：水平拖拽proxy:'clone',//设置代理元素，使用clone时为复制当前元素deltaX:10,//被拖拽元素左上角距离当前光标的X轴方向的距离deltaY:10,//被拖拽元素左上角距离当前光标的Y轴方向的距离proxy:function(source){//自定义代理元素varp=$('<divstyle="border:1pxsolid#ccc;width:400px;height:200px;"></div>');p.html($(source).html()).appendTo('body');returnp;},});//HTML部分<divid="box">内容部分</div>

二、事件

1.onBeforeDrag 拖动前发生

$('#box').draggable({onBeforeDrag:function(e){alert('拖动之前触发！');//returnfalse;}});

在拖动前发生，既当鼠标点击元素时发生，当返回false时将无法拖拽，我们不会让它直接返回false，因为这样没有任何意义，在使用时应该有充足的逻辑判断。

2.onStartDrag 拖动开始时发生

$('#box').draggable({onStartDrag:function(e){alert('拖动开始时触发！');//returnfalse;}});

在鼠标点击后拖动的一瞬间执行，执行时间在onBeforeDrag之后。

3.onDrag拖拽过程中执行

$('#box').draggable({onDrag:function(e){alert('拖动过程中触发！');}});

在拖动的过程中执行，当鼠标一移动就会执行，当不能拖动时返回false

4.onStopDrag 拖动停止后发生

$('#box').draggable({onStopDrag:function(e){alert('在拖动停止时触发！');}});

在拖动结束后触发，即松开鼠标时执行，无返回值。

5.以上事件可组合使用，执行顺序为onBeforeDrag -->onBeforeDrag -->onDrag -->onStopDrag

$('#box').draggable({onBeforeDrag:function(e){alert('拖动之前触发！');//returnfalse;},onStartDrag:function(e){alert('拖动时触发！');},onDrag:function(e){alert('拖动过程中触发！');},onStopDrag:function(e){alert('在拖动停止时触发！');},});

三、方法

方法名
说明option
返回属性对象
proxy
如果代理属性被设置则返回该拖动代理元素
enabl
允许拖
disable
禁止拖动

//返回属性对象console.log($('#box').draggable('options'));//返回代理元素onStartDrag:function(e){console.log($('#box').draggable('proxy'));},//禁止拖动$('#box').draggable('disable');//允许拖放$('#box').draggable('enable');

四、设置默认属性

在一次设置后当前页面所有拖拽都会共享这个属性，不用再去设置。

$(function(){$.fn.draggable.defaults.cursor='text';});