easyui Droppable组件实现放置特效

easyui Droppable组件实现放置特效

所谓放置，就是将一个物体放入一个物体内，当然对于easyui来说触发各种效果是必不可少的，同时这个组件也不会依赖于其他组件。

Droppable的加载方式

1,class  加载   一直不太喜欢class方式的加载  浪费一个位置，代码一多还看着乱七八糟的。

复制代码 代码如下:

2,js 加载调用

$("#box"gswtYBJ).droppable({

accept:'#pox', //将元素pox 放置在元素box中

});

Droppable的属性

1,accept 　　　　默认为null,确定哪些元素被接受，也就是那个元素能被放置

$("#box").droppable({

accept:'#pox', //将元素pox 放置在元素box中

});

2，deisabled　　默认为false   如果为true，则禁止放置

$("#box").droppable({

accept:'#pox', //将元素pox 放置在元素box中

disabled : true , //禁止放置

});

Droppable 事件列表

1,onDragEnter  在被拖拽元素到放置区域内的时候触发

2,onDragOver 在被拖拽元素经过放置区域的时候触发

3,onDragLeave  在被拖拽元素离开放置区域的时候触发

4,onDrop  在被拖拽元素放入到放置区的时候触发

onDragEnter /onDragOver/onDragLeave/onDrop: function (e,source){

//source 参数获取DOM元素

}

Droppable 方法列表

1，options 返回属性对象

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

2,enable,disable 和上面属性的功能是一样的  分别是启用和禁止放置

$('#box').droppable('enable/disable')

给大家展示下官方的示例吧

drag me!

drop here!

运行效果图这里就不给出了,官网直接就可以查看。OVER!

效果地址: http://jeasyui.com/demo/main/index.php?plugin=Droppable&theme=default&dir=ltr&pitem=

easyui 1.3.5 Droppable 就此完结。

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