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';