easyUIDraggable(拖动)组件03

一．加载方式

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

},