一.加载方式
//class 加载方式 <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 </div> //JS 加载调用
$('#box').draggable();
二.属性列表
|
| Draggable 属性 |
|
|
|
|
|
属性名 | 值 | 说明 |
|
|
|
|
|
Proxy | null/ | 当使用'clone',则克隆一个替代元素拖动。 |
|
string、function | 如果指定一个函数,则自定义替代元素。 |
| |
|
| ||
|
|
|
|
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('在拖动停止时触发!');
},