jQuery EasyUI，Droppable(放置)组件
学习要点：
1.加载方式
2.属性列表
3.事件列表
4.方法列表
本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方法，所谓放置，就将一个 物体入某一个物体内触发各种效果，这个组件不依赖于其他组件。
一．加载方式
//class 加载方式
<div id="dd"
class="easyui-droppable"
data-options="accept:'#box,#pox'"
style="background:black;width:600px;height:400px;">
</div>
droppable()将一个元素设置成放置元素，放置元素就是将另外指定的元素放置进来触发事件
//JS 加载调用
$('#box').droppable({
accept:'#box,#pox',
});
二．属性列表
accept selector 默认为 null，确定哪些元素被接受，值为要接收放置的元素id
/**
<div id="fzh">放置</div> <div id="box">
<div id="pox">内容部分</div>
</div>
**/ $(function () {
$('#box').draggable({ //将box元素设置拖拽 });
$('#fzh').droppable({ //将fzh元素设置成放置
accept:'#box,#pox' //确定哪些元素被接受，值为要接收放置的元素id
})
});
disabled boolean 默认为 false，如果为 true，则禁止放置
/**
<div id="fzh">放置</div> <div id="box">
<div id="pox">内容部分</div>
</div>
**/ $(function () {
$('#box').draggable({ //将box元素设置拖拽 });
$('#fzh').droppable({ //将fzh元素设置成放置
accept:'#box,#pox', //确定哪些元素被接受，值为要接收放置的元素id
disabled:true //如果为 true，则禁止放置
})
});
三．事件列表
注意：以下事件 e接收的事件event对象，source接收的放置进来的元素对象
onDragEnter e,source 在被拖拽元素到放置区内的时候触发，只触发一次
/**
<div id="fzh">放置</div> <div id="box">
<div id="pox">内容部分</div>
</div>
**/ $(function () {
$('#box').draggable({ //将box元素设置拖拽 });
$('#fzh').droppable({ //将fzh元素设置成放置
accept: '#box,#pox', //确定哪些元素被接受，值为要接收放置的元素id
onDragEnter: function (e, source) { //在被拖拽元素到放置区内的时候触发，只触发一次
$(this).css('background', 'blue');
}
})
});
onDragOver e,source 在被拖拽元素经过放置区的时候触发
/**
<div id="fzh">放置</div> <div id="box">
<div id="pox">内容部分</div>
</div>
**/ $(function () {
$('#box').draggable({ //将box元素设置拖拽 });
$('#fzh').droppable({ //将fzh元素设置成放置
accept: '#box,#pox', //确定哪些元素被接受，值为要接收放置的元素id
onDragEnter: function (e, source) { //在被拖拽元素经过放置区的时候触发，触发多次
$(this).css('background', 'blue');
}
})
});
onDragLeave e,source 在被拖拽元素离开放置区的时候触发
/**
<div id="fzh">放置</div> <div id="box">
<div id="pox">内容部分</div>
</div>
**/ $(function () {
$('#box').draggable({ //将box元素设置拖拽 });
$('#fzh').droppable({ //将fzh元素设置成放置
accept: '#box,#pox', //确定哪些元素被接受，值为要接收放置的元素id
onDragLeave: function (e, source) { //在被拖拽元素离开放置区的时候触发，
$(this).css('background', 'blue');
}
})
});
onDrop e,source 在被拖拽元素放入到放置区的时候触发，也就是放下鼠标左键弹起时触发
/**
<div id="fzh">放置</div> <div id="box">
<div id="pox">内容部分</div>
</div>
**/ $(function () {
$('#box').draggable({ //将box元素设置拖拽 });
$('#fzh').droppable({ //将fzh元素设置成放置
accept: '#box,#pox', //确定哪些元素被接受，值为要接收放置的元素id
onDrop: function (e, source) { //在被拖拽元素放入到放置区的时候触发，也就是放下鼠标左键弹起时触发
$(this).css('background', 'blue');
}
})
});
四．方法列表
options none 返回属性对象
/**
<div id="fzh">放置</div> <div id="box">
<div id="pox">内容部分</div>
</div>
**/ $(function () {
$('#box').draggable({ //将box元素设置拖拽 });
$('#fzh').droppable({ //将fzh元素设置成放置
accept: '#box,#pox', //确定哪些元素被接受，值为要接收放置的元素id
onDrop: function (e, source) { //在被拖拽元素放入到放置区的时候触发，也就是放下鼠标左键弹起时触发
$(this).css('background', 'blue');
}
});
var p = $('#fzh').droppable('options'); //options none 返回属性对象
$.each(p, function (attr, value) { //遍历属性对象
alert(attr + ':' + value);
});
});
enable none 启用放置功能
/**
<div id="fzh">放置</div> <div id="box">
<div id="pox">内容部分</div>
</div>
**/ $(function () {
$('#box').draggable({ //将box元素设置拖拽 });
$('#fzh').droppable({ //将fzh元素设置成放置
accept: '#box,#pox', //确定哪些元素被接受，值为要接收放置的元素id
onDrop: function (e, source) { //在被拖拽元素放入到放置区的时候触发，也就是放下鼠标左键弹起时触发
$(this).css('background', 'blue');
}
});
$('#fzh').droppable('disable'); //disable none
$('#fzh').droppable('enable'); //enable none 启用放置功能
});
disable none 禁用放置功能
/**
<div id="fzh">放置</div> <div id="box">
<div id="pox">内容部分</div>
</div>
**/ $(function () {
$('#box').draggable({ //将box元素设置拖拽 });
$('#fzh').droppable({ //将fzh元素设置成放置
accept: '#box,#pox', //确定哪些元素被接受，值为要接收放置的元素id
onDrop: function (e, source) { //在被拖拽元素放入到放置区的时候触发，也就是放下鼠标左键弹起时触发
$(this).css('background', 'blue');
}
});
$('#fzh').droppable('disable'); //disable none 禁用放置功能
});
$.fn.droppable.defaults 重写默认值对象。
$.fn.droppable.defaults.disabled = true;