droppable構(gòu)建了一個(gè)可拖入的區(qū)域抗碰。droppable組件往往和draggable組件一起使用弧蝇，可以將draggable組件拖入到droppable組件內(nèi)，實(shí)現(xiàn)自身想達(dá)到的效果看疗，我們首先通過(guò)一個(gè)極為簡(jiǎn)單的回收站例子來(lái)了解一下droppable組件。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<title>droppableDemo</title>
<style>
.droppable_container {
width:64px;
height: 64px;
}
.imgRecy {
width:64px;
height: 64px;
}
.imgDoc {
margin: 50px 0 0 50px;
width:48px;
height: 48px;
}
</style>
</head>
<body>
<div id="container">
<div class="easyui-droppable droppable_container" id="droppableContainer">
</div>
<div id="doc1" class="easyui-draggable">
</div>
<div id="doc2" class="easyui-draggable">
</div>
</div>
<script>
$("#droppableContainer").droppable({
accept:'#doc1, #doc2',
onDrop:function(e, source) {
$(source).remove();
$("#recy").attr("src","images/recy2.png");
}
});
</script>
</body>
</html>
下面分別是拖入前和拖入后的效果圖两芳。
其實(shí)原理很簡(jiǎn)單去枷。我們首先準(zhǔn)備兩個(gè)垃圾桶圖標(biāo)是复，一張是空垃圾桶竖螃，另一張是滿的垃圾桶，同時(shí)再準(zhǔn)備一個(gè)文件圖標(biāo)特咆。將垃圾桶構(gòu)造為droppable組件，同時(shí)將兩個(gè)文件構(gòu)造為draggable組件腻格。一旦將任意一個(gè)文件拖到droppable組件內(nèi)部（即垃圾桶中），通過(guò)jQuery將該文件圖標(biāo)從頁(yè)面中刪除荒叶，同時(shí)將空垃圾桶圖標(biāo)變換為滿垃圾桶圖標(biāo)即可输虱。
droppable組件屬性：
| 屬性名稱 | 屬性值類型 | 屬性默認(rèn)值 | 描述 |
|---|---|---|---|
| accept | 選擇器 | null | 指定哪些draggable可以被放入。 |
| disabled | 布爾值 | false | 禁用組件宪睹。 |
accept屬性指定了哪些draggable是可以被放入到droppable組件內(nèi)的，值為draggable組件的選擇器（如“#doc1”）亭病。上例代碼允許兩個(gè)文件圖標(biāo)放入，也就是id為“doc1”和“doc2”的div罪帖。
droppable組件方法：
| 方法名稱 | 參數(shù) | 描述 |
|---|---|---|
| options | 無(wú) | 返回所有屬性。 |
| enable | 無(wú) | 啟用組件整袁。 |
| disable | 無(wú) | 禁用組件。 |
方法就三個(gè)坐昙，很簡(jiǎn)單，也不多做說(shuō)明炸客。
droppable組件事件：
| 事件名稱 | 參數(shù) | 描述 |
|---|---|---|
| onDragEnter | e, source | 當(dāng)draggable組件進(jìn)入droppable組件時(shí)觸發(fā)。 |
| onDragOver | e, source | 當(dāng)draggable組件在droppable組件內(nèi)部移動(dòng)是觸發(fā)痹仙。 |
| onDragLeave | e, source | 當(dāng)draggable組件離開(kāi)droppable組件時(shí)觸發(fā)。 |
| onDrop | e, source | 當(dāng)draggable組件被放置進(jìn)droppable組件時(shí)觸發(fā)蝶溶。 |
這四個(gè)事件的參數(shù)都一樣宣渗，e是js中的event對(duì)象，source是被放入的draggable組件的DOM痕囱。
onDragEnter和onDragLeave分別在draggable組件進(jìn)入和離開(kāi)droppable組件時(shí)觸發(fā)，只觸發(fā)一次鞍恢。
onDragOver事件是在draggable組件在droppable組件內(nèi)部移動(dòng)時(shí)觸發(fā)，每移動(dòng)一下觸發(fā)一次每窖，可以通過(guò)該事件實(shí)現(xiàn)draggable組件在droppable組件內(nèi)部坐標(biāo)的實(shí)時(shí)顯示。
onDrop則在draggable組件放入到droppable組件內(nèi)觸發(fā)窒典，這個(gè)里的“放入”指在draggable組件上按下鼠標(biāo)，然后把draggable組件拖入到droppable組件內(nèi)部瀑志，再放開(kāi)鼠標(biāo)的一整個(gè)過(guò)程。
