学习要点：

1.加载方式

2.属性列表

3.事件列表

4.方法列表

 

本节重点了解 EasyUI 中 Draggable(拖动)组件的使用方法，这个组件不依赖于其他组件。

一． 加载方式

//class 加载方式  这种方式看起来html代码不干净，会污染html。建议使用JS的方式去加载

//JS 加载调用

//JS 加载调用$('#box').draggable();

 

二． 属性列表

Draggable  属性

属性名          值                                     说明

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'

JS代码

$('#box').draggable({        revert : true,        cursor : 'text',        handle : '#pox',        disabled : true,        edge : 180,        axis : 'v',        proxy : 'clone',        deltaX : 50,        deltaY : 50,        proxy : function (source) {            var p = $('
     
      ');            p.html($(source).html()).appendTo('body');            return p;        }            });
     

三、事件列表

事件名                        传参                    说明

onBeforeDrag             e                        拖动之前触发，返回 false 将取消拖动

onStartDrag               e                        拖动开始时触发

onDrag                      e                        拖动过程中触发，不能拖动时返回 false

onStopDrag               e                        拖动停止时触发

$('#box').draggable({onBeforeDrag : function (e) {        alert('拖动之前触发！');        return false;},onStartDrag : function (e) {        alert('拖动时触发！');},onDrag : function (e) {        alert('拖动过程中触发！');},onStopDrag : function (e) {        alert('在拖动停止时触发！');},});

四． 方法列表

事件名       传参        说明

options     none       返回属性对象

proxy       none        如果代理属性被设置则返回该拖动代理元素

enable       none       允许拖动

disable      none       禁止拖动

$('#box').draggable('disable');$('#box').draggable('enable');console.log($('#box').draggable('options'));

上面的方法直接是元素绑定draggable之后直接传入相关参数即可