jQuery Easy UI Draggable(拖動)組件
上文已經提到過了 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>
點擊下載源碼
jQuery Easy UI Draggable(拖動)組件