Jquery easyUi Droppable組件怎么用

這篇文章主要介紹了Jquery easyUi Droppable組件怎么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

    一、加載方式

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

        1.css樣式加載方式

<div id="box" class="easyui-droppable" data-options="accept:'#bb'" >
</div>

        2.Jquery加載方式

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

//HTML部分
<div id="box" >
</div>

    二、Draggable 屬性  

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

        三、Droppable 事件

注釋：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 方法

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

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

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Jquery easyUi Droppable組件怎么用”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!