上文已經提到過了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" rel="external nofollow" /> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" /> <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>
新聞熱點
疑難解答
圖片精選
