首頁 > web前端 > html教學 > EasyUI系列学习(四)-Droppable(放置)_html/css_WEB-ITnose

EasyUI系列学习(四)-Droppable(放置)_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:26:26
原創
1307 人瀏覽過

一、创建组件

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>
登入後複製

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板