Heim >Web-Frontend >HTML-Tutorial >EasyUI系列学习(四)-Droppable(放置)_html/css_WEB-ITnose
一、创建组件
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>