jQueryEasyUI学习笔记(2) - Draggable(拖动)组件

<pre name="code" class="html">一．加载方式//class 加载方式<div id="box" class="easyui-draggable"style="width:400px;height:200px;background:red;">内容部分</div>//JS 加载调用$('#box').draggable();二．属性列表Draggable 属性属性名值说明Proxynull/string、function当使用'clone'，则克隆一个替代元素拖动。如果指定一个函数，则自定义替代元素。revert false/boolean 设置为true，则拖动停止时返回起始位置cursor move/string 拖动时的CSS 指针样式deltaX null/number 被拖动的元素对应于当前光标位置xdeltaY null/number 被拖动的元素对应于当前光标位置yhandle null/selector 开始拖动的句柄disabled false/boolean 设置为true，则停止拖动edge 0/number 可以在其中拖动的容器的宽度axis null/string 设置拖动为垂直'v'，还是水平'h'//属性设置$('#box').draggable({revert : true,cursor : 'text',handle : '#pox',disabled : false,edge : 50,axis : 'v',proxy: 'clone',deltaX : 10,deltaY : 10,proxy: function(source){var p = $('<div style="border:1px solid#ccc;width:400px;height:200px;"></div>');p.html($(source).html()).appendTo('body');return p;},});三．事件列表Draggable 事件事件名传参说明onBeforeDrag e 拖动之前触发，返回false 将取消拖动onStartDrag e 拖动开始时触发onDrag e 拖动过程中触发，不能拖动时返回falseonStopDrag e 拖动停止时触发$('#box').draggable({onBeforeDrag : function (e) {alert('拖动之前触发！');//return false;},onStartDrag : function (e) {alert('拖动时触发！');},onDrag : function (e) {alert('拖动过程中触发！');},onStopDrag : function (e) {alert('在拖动停止时触发！');},});四．方法列表Draggable 方法事件名传参说明options none 返回属性对象proxy none 如果代理属性被设置则返回该拖动代理元素enable none 允许拖动disable none 禁止拖动//返回属性对象console.log($('#box').draggable('options'));//返回代理元素onStartDrag : function (e) {console.log($('#box').draggable('proxy'));},//禁止拖动$('#box').draggable('disable');//允许拖放$('#box').draggable('enable');