Jquery easyUi Droppable(放置)組件

    生活就是不斷的讓自己活下去，而我們如何活下去，就是靠不斷的完善自己。所以今天我們來看看Jquery easyUi的Droppable(放置)組件。

    一、加載方式

    在使用放置組件時，有一個前提條件，那就是需要有一個可以拖拽的元素，不然我們的放置組件將毫無意義。所以我們這裏默認有一個ID爲"bb"的元素是設置了課拖拽的。

        1.css樣式加載方式

<div id="box" class="easyui-droppable" data-options="accept:'#bb'" style="background:black;width:600px;height:400px;">
</div>

        2.Jquery加載方式

//JS部分
$('#box').droppable({
    accept:'#bb',
});

//HTML部分
<div id="box" style="background:black;width:600px;height:400px;">
</div>

    二、Draggable 屬性  

$('#box').droppable({
    accept : '#bb',        //設置可以接受哪些元素，默認爲null
    disabled : true,       //設置是否可以放置，Boolean類型，默認爲true
});

        三、Droppable 事件

事件名	傳參	說明
onDragEnter	e,source	在被拖拽元素到放置區內的時候觸發
onDragOver	e,source	在被拖拽元素經過放置區的時候觸
onDragLeave	e,source	在被拖拽元素離開放置區的時候觸發
onDrop	e,source	在被拖拽元素放入到放置區的時候觸發

註釋：source 參數獲取 DOM 元素。

$('#dd').droppable({
    accept : '#box',
    onDragOver : function (e, source) {
       alert("在被拖拽元素經過放置區的時候觸");
    },
    onDragEnter : function (e, source) {
        alert("在被拖拽元素到放置區內的時候觸發");
    },
    onDragLeave : function (e, source) {
        alert("在被拖拽元素離開放置區的時候觸發");
    },
    onDrop : function (e, source) {
        alert("在被拖拽元素放入到放置區的時候觸發");
    },
});

    四、Droggable 方法

方法	說明
options	返回屬性對象
enabl	啓用放置功
disable	禁用放置功能

//返回屬性對象
console.log($('#box').droggable('options'));

//禁止放置
$('#box').draggable('disable');

//啓用放置
$('#box').draggable('enable');