3、Draggable 拖動組件 · Jquery EasyUI 學習筆記

# 加載方式 ## class加載 ```  <div class="easyui-draggable" id="box" style="width: 300px;height: 200px;background-color: #00BBEE;"> </div> ``` ## Js調用加載 ```  <div id="box" style="width: 300px;height: 200px;background-color: #00BBEE;"> </div> <script> $(function(){ $('#box').draggable(); }); </script> ``` # 屬性列表 |屬性名 | 默認值/值類型 | 值 | |--- | --- |---| |Proxy |null/string、function | 當使用'clone'，則克隆一個替代元素拖動。如果指定一個函數，則自定義替代元素。| |revert | false/boolean | 設置為 true，則拖動停止時返回起始位置| |cursor | move/string | 拖動時的 CSS 指針樣式| |deltaX | null/number | 被拖動的元素對應于當前光標位置 x| |deltaY | null/number | 被拖動的元素對應于當前光標位置 y| |handle | null/selector | 開始拖動的句柄| |disabled | false/boolean | 設置為 true，則停止拖動| |edge | 0/number | 可以在其中拖動的容器的寬度| |axis | null/string | 設置拖動為垂直'v'，還是水平'h'| ``` <script> $(function(){ $('#box').draggable({ //Proxy null/string、function 當使用'clone'，則克隆一個替代元素拖動。如果指定一個函數，則自定義替代元素。 //proxy:'clone', 利用clone //自定義函數 proxy: function(source){ var p = $('<div style="border:1px solid #ccc;width:400px;height:200px;"></div>'); p.html($(source).html()).appendTo('body'); return p; }, //revert false/boolean 設置為 true，則拖動停止時返回起始位置 revert:true, //cursor move/string 拖動時的 CSS 指針樣式 cursor:'text', //deltaX null/number 被拖動的元素對應于當前光標位置 x(設置代理后有效) deltaX:null, //deltaY null/number 被拖動的元素對應于當前光標位置 y deltaY:null, //edge 0/number 可以在其中拖動的容器的寬度(低于寬度則無法進行拖動) edge:25, //axis null/string 設置拖動為垂直'v'，還是水平'h' axis:'v', //disabled false/boolean 設置為 true，則停止拖動 disabled:true, //handle null/selector 開始拖動的句柄 handle:'#box' }); }); </script> ``` # 事件列表 |事件名 | 傳參 |　說明| |--- | --- |---| |onBeforeDrag | e | 拖動之前觸發，返回 false 將取消拖動| |onStartDrag | e | 拖動開始時觸發| |onDrag | e | 拖動過程中觸發，不能拖動時返回 false| |onStopDrag | e | 拖動停止時觸發| $('#box').draggable({ // 拖動前觸發,返回false則取消拖動 onBeforeDrag:function(e) { console.log('拖動前'); //return false; }, // 拖動開始時觸發,比onBeforeDrag晚 onStartDrag:function(e) { console.log('拖動開始'); }, // 拖動過程中觸發，不能拖動時返回 false，每移動一點觸發一次 onDrag:function(e) { console.log('拖動中'); }, // 拖動停止時觸發 onStopDrag:function(e) { console.log('拖動結束'); } }); # 方法列表 |事件名 | 傳參 |　說明| |--- | --- |---| |options | none | 返回屬性對象| |proxy | none | 如果代理屬性被設置則返回該拖動代理元素| |enable | none | 允許拖動| |disable | none | 禁止拖動| //返回屬性對象 console.log($('#box').draggable('options')); //返回代理元素 onStartDrag : function (e) { console.log($('#box').draggable('proxy')); } //禁止拖動 $('#box').draggable('disable'); //允許拖放 $('#box').draggable('enable'); //可以使用$.fn.draggable.defaults 重寫默認值對象。 $.fn.draggable.defaults.cursor = 'text';