EasyUI系列學習(四)-Droppable(放置)

一、創建組件

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>