这篇文章主要介绍了Jquery easyUi Droppable组件怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
生活就是不断的让自己活下去，而我们如何活下去，就是靠不断的完善自己。所以今天我们来看看Jquery easyUi的Droppable(放置)组件。
一、加载方式
在使用放置组件时，有一个前提条件，那就是需要有一个可以拖拽的元素，不然我们的放置组件将毫无意义。所以我们这里默认有一个ID为"bb"的元素是设置了课拖拽的。
1.css样式加载方式
<div id="box" class="easyui-droppable" data-options="accept:'#bb'" >
</div>
2.Jquery加载方式
//JS部分
$('#box').droppable({
accept:'#bb',
});//HTML部分
<div id="box" >
</div>
二、Draggable 属性
$('#box').droppable({
accept : '#bb', //设置可以接受哪些元素，默认为null
disabled : true, //设置是否可以放置，Boolean类型，默认为true
}); 三、Droppable 事件
事件名
| 传参
| 说明
|
onDragEnter
| e,source
| 在被拖拽元素到放置区内的时候触发
|
onDragOver
| e,source
| 在被拖拽元素经过放置区的时候触
|
onDragLeave
| e,source
| 在被拖拽元素离开放置区的时候触发
|
onDrop
| e,source
| 在被拖拽元素放入到放置区的时候触发
|
注释：source 参数获取 DOM 元素。
$('#dd').droppable({
accept : '#box',
onDragOver : function (e, source) {
alert("在被拖拽元素经过放置区的时候触");
},
onDragEnter : function (e, source) {
alert("在被拖拽元素到放置区内的时候触发");
},
onDragLeave : function (e, source) {
alert("在被拖拽元素离开放置区的时候触发");
},
onDrop : function (e, source) {
alert("在被拖拽元素放入到放置区的时候触发");
},
}); 四、Droggable 方法
方法
| 说明
|
options
| 返回属性对象
|
enabl
| 启用放置功
|
disable
| 禁用放置功能
|
//返回属性对象
console.log($('#box').droggable('options'));
//禁止放置
$('#box').draggable('disable');
//启用放置
$('#box').draggable('enable');感谢你能够认真阅读完这篇文章，希望小编分享的“Jquery easyUi Droppable组件怎么用”这篇文章对大家有帮助，同时也希望大家多多支持天达云，关注天达云行业资讯频道，更多相关知识等着你来学习!