easyui Draggable组件实现拖动效果

easyui Draggable组件实现拖动效果

easyui做为一个封装了JQusey的UI插件，其实还是蛮好用的，至少省了像我这种渣渣很多时间。

Draggable的加载方式有两种：

1，通过class加载，如下：

通过js加载，如下：

$('#box').draggable();

以上两点需要注意的是不管是'easyui-draggable',还是draggable 都是固定的，他们都是通过调用easyui已经写好的函数，来实现jquery效果的。

Draggable的属性：

revert    当值为true时，拖动停止时返回起始位置，可以到处拖。

revert : boolean,

axis　　限制拖动的方向，水平'h'？垂直'v'？这个和 revert组合起来比较有意思，设置拖动方向为

垂直的话就跟微信，微博刷新消息一样。

axis : String/'v'/'h',

proxy　　克隆，就是拖动的时候要拖动的对象不变，然后在鼠标上复制一个要拖动的对象，当然也

可以是其他的，可以触发function。

proxy : null/String/function,

　　然后还有很多其他的属性，觉得并不是特别有趣。

cursor : move/String ,     //指定拖动时候指针的css样式 变得美美哒

deltaX : null/number,

deltaY : null/number,    //被拖动的元素对应于当前光标位置的x,y  就是给被   拖动元素与光标一个距离

handle : null/selector    //开始拖动的句柄   手柄！只能用手柄拖动！对的！

disabled : boolean        //设置为true是，不能拖动当先绑定的元素

edge : number             //可以在其中拖动的容器的宽度  从容器的上下左右往里算 ，就像一个矩形里面包着一个矩形 ，然后里面那只有鼠标放在里面矩形的时候元素才能被拖动

例子：

$('#box').draggable({

revert : true,

cursor: 'text',

handle : '#pox',

disabled : false,

edge : 50,

axis :'v',

proxy : 'clone',

deltaX: 10,

deltaY : 10,

proxy: function(source){

console.log('呵呵哒！');

}

});

Draggable的事件：

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

onBeforeDrag : function (e){

alert('拖动之前触发');

return false;

}

onStartDrag 拖动时触发

onStartDrag : function(e){

alert('拖动时触发');

}

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

onDrag : function(e){

alert('拖动过程触发');

}

onDrag 停止拖动时触发

onStopDrag : function (e){

alert('在拖动停止时触发');

}

Draggable 方法列表

options 返回属性对象

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

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

console.log($('#box').draggable('proxy'));

enable 可以被拖动

$('#box').draggable('enable');

disable 禁止被拖动

$('#box').draggable('disable');

我们来看个简单的例子

Move the boxes below by clicking on it with mouse.

以上差不多就是Easyui 1.2.5  Draggable的全部属性，事件、方法和示例了, 如果有什么不对的话，欢迎评论，一起讨论和赐教。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。