easyUIDraggable(拖动)组件03

一.加载方式


//class 加载方式 <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 </div> //JS 加载调用
$('#box').draggable();

二.属性列表

 

 

 

Draggable 属性

 

 

 

 

 

属性名

说明

 

 

 

 

 

Proxy

null/

当使用'clone',则克隆一个替代元素拖动。

 

stringfunction

如果指定一个函数,则自定义替代元素。

 

 

 

 

 

 

 

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('在拖动停止时触发!');

},



 


©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页