一、创建组件
1.使用标签创建一个放置区
<div id="pox" class="easyui-droppable" style="width: 200px; height: 100px; left: 100px; background:cyan"></div>
2.使用JavaScript创建一个放置区
<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan"></div>
<script>
$(function () {
$("#pox").droppable();
})
</script>
二、属性
1.accept：哪些元素会对放置区有影响
<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box1" style="width:100px;height:50px;left:100px;background:lightcoral">物品1</div>
<div id="box2" style="width:100px;height:50px;left:100px;background:darkseagreen">物品2</div>
<script>
$(function() {
$("#box1").draggable();
$("#box2").draggable();
$("#pox").droppable({
accept: "#box1,#box2",
onDragEnter: function(e, source) {
//source分别放入的物体，即box1对象，box2对象
alert($(source).html());
},
});
});
</script>
2.disabled：如果为true，则禁止放置，即放置没有效果
<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box1" style="width:100px;height:50px;left:100px;background:lightcoral">物品1</div>
<div id="box2" style="width:100px;height:50px;left:100px;background:darkseagreen">物品2</div>
<script>
$(function () {
$("#box1").draggable();
$("#box2").draggable();
$("#pox").droppable({
accept: "#box1,#box2",
disabled: true,
onDragEnter: function (e, source) {
//不会弹出任何东西
alert($(source).html());
},
});
});
</script>
三、事件
1.onDragEnter：在被拖拽元素到放置区内的时候触发，source参数表示被拖拽的DOM元素
<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
$(function () {
$("#box").draggable();
$("#pox").droppable({
accept: "#box",
onDragEnter: function (e, source) {
$(this).css("background", "red");;
},
});
});
</script>
2.onDragLeave：在被拖拽元素离开放置区的时候触发，source参数表示被拖拽的DOM元素
<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
$(function () {
$("#box").draggable();
$("#pox").droppable({
accept: "#box",
onDragEnter: function (e, source) {
$(this).css("background", "red");;
},
onDragLeave: function (e, source) {
$(this).css("background", "yellow");
}
});
});
</script>
3.onDrop：在被拖拽元素放入到放置区的时候触发，source参数表示被拖拽的DOM元素
<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
$(function () {
$("#box").draggable();
$("#pox").droppable({
accept: "#box",
onDragEnter: function (e, source) {
$(this).css("background", "red");;
},
onDragLeave: function (e, source) {
$(this).css("background", "yellow");
},
onDrop: function (e, source) {
$(this).css("background", "green");
}
});
});
</script>
4.onDragOver：在被拖拽元素经过放置区的时候触发，source参数表示被拖拽的DOM元素
<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
$(function () {
$("#box").draggable();
$("#pox").droppable({
accept: "#box",
onDragEnter: function (e, source) {
$(this).css("background", "red");;
},
onDragLeave: function (e, source) {
$(this).css("background", "yellow");
},
onDrop: function (e, source) {
$(this).css("background", "green");
},
onDragOver: function (e, source) {
$(this).css("background", "orange");
}
});
});
</script>
四、方法
1.options：返回属性对象
<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
$(function () {
$("#pox").droppable({
accept: "#box"
});
console.log($("#pox").droppable("options"));
});
</script>
2.disable：禁用放置功能
<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
$(function () {
$("#box").draggable();
$("#pox").droppable({
accept: "#box",
onDragEnter: function (e, source) {
$(this).css("background", "red");;
},
});
//放置物品不会变色
$("#pox").droppable("disable");
});
</script>
3.enable：启用放置功能
<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
$(function () {
$("#box").draggable();
$("#pox").droppable({
accept: "#box",
onDragEnter: function (e, source) {
$(this).css("background", "red");;
},
});
$("#pox").droppable("disable");
//放置区会变色
$("#pox").droppable("enable");
});
</script>
五、重写默认对象
1.使用$.fn.droppable.defaults重写默认值对象
<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
$(function () {
$.droppable.defaults.disabled = true;
$("#box").draggable();
$("#pox").droppable({
accept: "#box",
onDragEnter: function (e, source) {
$(this).css("background", "red");;
},
});
});
</script>