遮天,千年殇

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

JqueryeasyUiDroppable組件怎么用

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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序設(shè)計(jì)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了李滄免費(fèi)建站歡迎大家使用！

生活就是不斷的讓自己活下去，而我們?nèi)绾位钕氯?，就是靠不斷的完善自己。所以今天我們來看看Jquery easyUi的Droppable(放置)組件。

一、加載方式

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

1.css樣式加載方式

2.Jquery加載方式

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

//HTML部分

二、Draggable 屬性

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

三、Droppable 事件

事件名	傳參	說明
onDragEnter	e,source	在被拖拽元素到放置區(qū)內(nèi)的時(shí)候觸發(fā)
onDragOver	e,source	在被拖拽元素經(jīng)過放置區(qū)的時(shí)候觸
onDragLeave	e,source	在被拖拽元素離開放置區(qū)的時(shí)候觸發(fā)
onDrop	e,source	在被拖拽元素放入到放置區(qū)的時(shí)候觸發(fā)

注釋：source 參數(shù)獲取 DOM 元素。

$('#dd').droppable({
    accept : '#box',
    onDragOver : function (e, source) {
       alert("在被拖拽元素經(jīng)過放置區(qū)的時(shí)候觸");
    },
    onDragEnter : function (e, source) {
        alert("在被拖拽元素到放置區(qū)內(nèi)的時(shí)候觸發(fā)");
    },
    onDragLeave : function (e, source) {
        alert("在被拖拽元素離開放置區(qū)的時(shí)候觸發(fā)");
    },
    onDrop : function (e, source) {
        alert("在被拖拽元素放入到放置區(qū)的時(shí)候觸發(fā)");
    },
});

四、Droggable 方法

方法	說明
options	返回屬性對(duì)象
enabl	啟用放置功
disable	禁用放置功能

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

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Jquery easyUi Droppable組件怎么用”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

網(wǎng)站標(biāo)題：JqueryeasyUiDroppable組件怎么用
文章位置：http://fisionsoft.com.cn/article/isggps.html

新聞中心

其他資訊