droppable建構了一個可拖入的區域。droppable元件往往和draggable元件一起使用，可以将draggable元件拖入到droppable元件内，實作自身想達到的效果，我們首先通過一個極為簡單的資源回收筒例子來了解一下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:px;
height: px;
}
.imgRecy {
width:px;
height: px;
}
.imgDoc {
margin: px px;
width:px;
height: px;
}
</style>
</head>
<body>
<div id="container">
<div class="easyui-droppable droppable_container" id="droppableContainer">
<img src="images/recy.png" class="imgRecy" id="recy">
</div>
<div id="doc1" class="easyui-draggable">
<img src="images/doc.png" id="d1" class="imgDoc">
</div>
<div id="doc2" class="easyui-draggable">
<img src="images/doc.png" id="d2" class="imgDoc">
</div>
</div>
<script>
$("#droppableContainer").droppable({
accept:'#doc1, #doc2',
onDrop:function(e, source) {
$(source).remove();
$("#recy").attr("src","images/recy2.png");
}
});
</script>
</body>
</html>
下面分别是拖入前和拖入後的效果圖。
其實原理很簡單。我們首先準備兩個垃圾桶圖示，一張是空垃圾桶，另一張是滿的垃圾桶，同時再準備一個檔案圖示。将垃圾桶構造為droppable元件，同時将兩個檔案構造為draggable元件。一旦将任意一個檔案拖到droppable元件内部（即垃圾桶中），通過jQuery将該檔案圖示從頁面中删除，同時将空垃圾桶圖示變換為滿垃圾桶圖示即可。
droppable元件屬性：
| 屬性名稱 | 屬性值類型 | 屬性預設值 | 描述 |
|---|---|---|---|
| accept | 選擇器 | null | 指定哪些draggable可以被放入。 |
| disabled | 布爾值 | false | 禁用元件。 |
accept屬性指定了哪些draggable是可以被放入到droppable元件内的，值為draggable元件的選擇器（如“#doc1”）。上例代碼允許兩個檔案圖示放入，也就是id為“doc1”和“doc2”的div。
droppable元件方法：
| 方法名稱 | 參數 | 描述 |
|---|---|---|
| options | 無 | 傳回所有屬性。 |
| enable | 無 | 啟用元件。 |
| disable | 無 | 禁用元件。 |
方法就三個，很簡單，也不多做說明。
droppable元件事件：
| 事件名稱 | 參數 | 描述 |
|---|---|---|
| onDragEnter | e, source | 當draggable元件進入droppable元件時觸發。 |
| onDragOver | e, source | 當draggable元件在droppable元件内部移動是觸發。 |
| onDragLeave | e, source | 當draggable元件離開droppable元件時觸發。 |
| onDrop | e, source | 當draggable元件被放置進droppable元件時觸發。 |
這四個事件的參數都一樣，e是js中的event對象，source是被放入的draggable元件的DOM。
onDragEnter和onDragLeave分别在draggable元件進入和離開droppable元件時觸發，隻觸發一次。
onDragOver事件是在draggable元件在droppable元件内部移動時觸發，每移動一下觸發一次，可以通過該事件實作draggable元件在droppable元件内部坐标的實時顯示。
onDrop則在draggable元件放入到droppable元件内觸發，這個裡的“放入”指在draggable元件上按下滑鼠，然後把draggable元件拖入到droppable元件内部，再放開滑鼠的一整個過程。
![jQuery Easy UI Tooptip(提示框)元件[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)