Draggable的加载方式有两种：
1，通过class加载，如下：
<div></div>
通过JS加载，如下：
$('#box').draggable();
以上两点需要注意的是不管是'easyui-draggable',还是draggable 都是固定的，他们都是通过调用easyui已经写好的函数，来实现jQuery效果的。
Draggable的属性：
revert 当值为true时，拖动停止时返回起始位置，可以到处拖。
revert : boolean,
axis 限制拖动的方向，水平'h'？垂直'v'？这个和 revert组合起来比较有意思，设置拖动方向为
垂直的话就跟微信，微博刷新消息一样。
axis : String/'v'https://www.jb51.net/'h',
proxy 克隆，就是拖动的时候要拖动的对象不变，然后在鼠标上复制一个要拖动的对象，当然也
可以是其他的，可以触发function。
proxy : null/String/function,
然后还有很多其他的属性，觉得并不是特别有趣。
cursor : move/String , //指定拖动时候指针的CSS样式 变得美美哒
deltaX : null/number,
deltaY : null/number, //被拖动的元素对应于当前光标位置的x,y 就是给被 拖动元素与光标一个距离
handle : null/selector //开始拖动的句柄 手柄！只能用手柄拖动！对的！
disabled : boolean //设置为true是，不能拖动当先绑定的元素
edge : number //可以在其中拖动的容器的宽度 从容器的上下左右往里算 ，就像一个矩形里面包着一个矩形 ，然后里面那只有鼠标放在里面矩形的时候元素才能被拖动
例子：
$('#box').draggable({ revert : true, cursor: 'text', handle : '#pox', disabled : false, edge : 50, axis :'v', proxy : 'clone', deltaX: 10, deltaY : 10, proxy: function(source){ console.log('呵呵哒！'); } });
Draggable的事件：
onBeforeDrag 拖动之前触发，返回false将取消拖动
onBeforeDrag : function (e){ alert('拖动之前触发'); return false; }
onStartDrag 拖动时触发
onStartDrag : function(e){ alert('拖动时触发'); }
onDrag 拖动过程中触发，不能拖动事返回false
onDrag : function(e){ alert('拖动过程触发'); }
onDrag 停止拖动时触发
onStopDrag : function (e){ alert('在拖动停止时触发'); }
Draggable 方法列表
options 返回属性对象
console.log($('#box').draggable('options'));
proxy 如果代理属性被设置则返回该拖动代理元素
console.log($('#box').draggable('proxy'));
enable 可以被拖动
$('#box').draggable('enable');
disable 禁止被拖动
$('#box').draggable('disable');
我们来看个简单的例子
<pre>html> <meta charset="UTF-8"> <title>Basic Draggable - jQuery EasyUI Demo</title> <link type="text/css" href="https://www.jb51.net/jquery-easyui-1.3.6/themes/metro/easyui.css"> <link type="text/css" href="https://www.jb51.net/jquery-easyui-1.3.6/themes/icon.css"> <link type="text/css" href="https://www.jb51.net/jquery-easyui-1.3.6/demo/demo.css"> <script type="text/javascript" src="https://www.jb51.net/jquery-easyui-1.3.6/jquery.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/jquery-easyui-1.3.6/jquery.easyui.min.js"></script> <h2>Basic Draggable</h2> <p>Move the boxes below by clicking on it with mouse.</p> <div data-options="handle:'#title'"> <div>容器里面的内容</div> </div> <script> $(function () { $("#title").draggable({ proxy: function (a) { var a = $('<div>你拖我干啥</div>'); a.appendTo('body'); return a; }, cursor: 'pointer', edge: '6' }); }); </script> </pre><br><br>
以上差不多就是Easyui 1.2.5 Draggable的全部属性，事件、方法和示例了, 如果有什么不对的话，欢迎评论，一起讨论和赐教。
您可能感兴趣的文章: