easyui做為一個封裝了JQusey的UI插件，其實還是蠻好用的，至少省了像我這種渣渣很多時間。
Draggable的加載方式有兩種：
1，通過class加載，如下：
<div id="box" class="easyui-draggable"></div>
通過JS加載，如下：
$('#box').draggable();以上兩點需要注意的是不管是'easyui-draggable',還是draggable 都是固定的，他們都是通過調用easyui已經寫好的函數，來實現jQuery效果的。
Draggable的屬性：
revert 當值為true時，拖動停止時返回起始位置，可以到處拖。
revert : boolean,
axis 限制拖動的方向，水平'h'？垂直'v'？這個和 revert組合起來比較有意思，設置拖動方向為
垂直的話就跟微信，微博刷新消息一樣。
axis : String/'v'/'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 class="brush:java;">html> <meta charset="UTF-8"> <title>Basic Draggable - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css"> <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script> <script type="text/javascript" src="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 id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;"> <div id="title" style="background:#ccc;width:100px;height:100px;">容器里面的內容</div> </div> <script> $(function () { $("#title").draggable({ proxy: function (a) { var a = $('<div class="proxy_div">你拖我干啥</div>'); a.appendTo('body'); return a; }, cursor: 'pointer', edge: '6' }); }); </script> </pre><br><br>以上差不多就是Easyui 1.2.5 Draggable的全部屬性，事件、方法和示例了, 如果有什么不對的話，歡迎評論，一起討論和賜教。
新聞熱點
疑難解答
