星空网 > 软件开发 > 网页设计

EasyUI系列学习(四)

一、创建组件

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>




原标题:EasyUI系列学习(四)

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

光子易:https://www.goluckyvip.com/tag/31996.html
广安的专线物流:https://www.goluckyvip.com/tag/31997.html
广百电商和跨境电商:https://www.goluckyvip.com/tag/31998.html
广百跨境电商:https://www.goluckyvip.com/tag/31999.html
英文函电:https://www.goluckyvip.com/tag/32.html
物流差异化:https://www.goluckyvip.com/tag/320.html
南京浦口都有什么好玩的地方 南京浦口都有什么好玩的地方推荐:https://www.vstour.cn/a/363180.html
永康白云风景区怎么走 白云山风景区怎么去??:https://www.vstour.cn/a/363181.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流