第 3 章 Draggable(拖动)组件

学习要点:

1.加载方式

2.属性列表

3.事件列表

4.方法列表

---

问题描述：

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

他组件。

一.加载方式

//class 加载方式
<div id="box" class="easyui-draggable" 
style="width:400px;height:200px;background:red;">
内容部分
</div>
//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'

//属性设置
$('#box').draggable({ 
    revert : true,
    cursor : 'text', 
    handle : '#pox', 
    disabled : false, 
    edge : 50,
    axis : 'v',
    proxy: 'clone',
    deltaX : 10,
    deltaY : 10,
    proxy: function(source){
    var p = $('<div style="border:1px solid #ccc;width:400px;height:200px;"></div>');
    p.html($(source).html()).appendTo('body');
    return p;
 },
});

三.事件列表

Draggable 事件

事件名	传参	说明
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('在拖动停止时触发!'); 
    },

});

四.方法列表

Draggable 方法

事件名	传参	说明
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');

PS:我们可以使用$.fn.draggable.defaults 重写默认值对象。
$.fn.draggable.defaults.cursor = 'text';

李炎恢 jQuery EasyUI 视频教程_哔哩哔哩_bilibili