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>
以上差不多就是Easyui 1.2.5 Draggable的全部屬性，事件、方法和示例了, 如果有什麼不對的話，歡迎評論，一起討論和賜教。
