上文已經提到過了 jQuery EasyUI插件引用一般我們常用的有兩種方式（排除easyload加載方式），所以本篇要總結的Draggable組件同樣有兩種方式加載：
（1）、使用class加載方式：
<div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;">
內容部分
</div>
（2）、JS 加載調用
$('#box').draggable();
同樣上文也說了，使用class屬性不利於我們拓展組件的其他屬性，所以我們使用JS調用的方式，後面的文章也是使用JS調用的方式。
該組件有若干屬性、方法及觸發事件，不在這裏列舉了，都放到代碼示例裏並且加上註釋了。
示例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script>
$(function () {
$.fn.draggable.defaults.cursor = 'text';//*****採用這種方式重寫默認值
$('#box').draggable({
//revert : true, 默認值爲false 設置爲true的時候拖動結束後返回起始位置
//cursor : 'text', 定義拖動時指針的樣式
//handle : '#pox', 開始拖動時的句柄,就是點擊哪裏可以拖動，參數是一個JQ選擇器
//disabled : true, 設置爲true的時候,禁止拖動
//edge : 0,
//axis : 'v', 不寫：任意拖動 值爲v：垂直拖動 值爲h：水平拖動
//proxy : 'clone', 當使用'clone'的時候則克隆一個替代元素拖動，如果指定一個函數，則可以自定義替代元素。
deltaX : 50,//被拖動元素對應於當前光標位置X
deltaY : 50,//被拖動元素對應於當前光標位置Y
proxy : function (source) {
var p = $('<div style="width:400px;height:200px;border:1px dashed #ccc">');
p.html($(source).html()).appendTo('body');
return p;
}
/**
可觸發的事件：
onBeforeDrag : function (e) {
alert('拖動前觸發！');
},
onBeforeDrag : function (e) {
//return false;
},
onStartDrag : function (e) {
alert('拖動開始觸發！');
console.log($('#box').draggable('proxy'));
},
onDrag : function (e) {
//alert('拖動過程觸發！');
},
onStopDrag : function (e) {
alert('拖動結束後觸發！');
}
*/
});
//$('#box').draggable('disable');//禁止拖動
//$('#box').draggable('enable');//可以拖動
//alert($('#box').draggable('options')); //返回對象屬性
});
</script>
</head>
<body>
<div id="box" style="width:400px;height:200px;background:orange;">
<span id="pox">內容部分</span>
</div>
</body>
</html>