droppable構建了一個可拖入的區域。droppable組件往往和draggable組件一起使用，可以將draggable組件拖入到droppable組件內，實現自身想達到的效果，我們首先通過一個極為簡單的回收站例子來了解一下droppable組件。

　　下面分別是拖入前和拖入后的效果圖。 　　 　　其實原理很簡單。我們首先準備兩個垃圾桶圖標，一張是空垃圾桶，另一張是滿的垃圾桶，同時再準備一個文件圖標。將垃圾桶構造為droppable組件，同時將兩個文件構造為draggable組件。一旦將任意一個文件拖到droppable組件內部（即垃圾桶中），通過jQuery將該文件圖標從頁面中刪除，同時將空垃圾桶圖標變換為滿垃圾桶圖標即可。 　　 　　droppable組件屬性：

　　accept屬性指定了哪些draggable是可以被放入到droppable組件內的，值為draggable組件的選擇器（如“#doc1”）。上例代碼允許兩個文件圖標放入，也就是id為“doc1”和“doc2”的div。 　　 　　droppable組件方法：

方法就三個，很簡單，也不多做說明。

　　droppable組件事件：

　　這四個事件的參數都一樣，e是js中的event對象，source是被放入的draggable組件的DOM。 　　onDragEnter和onDragLeave分別在draggable組件進入和離開droppable組件時觸發，只觸發一次。 　　onDragOver事件是在draggable組件在droppable組件內部移動時觸發，每移動一下觸發一次，可以通過該事件實現draggable組件在droppable組件內部坐標的實時顯示。 　　onDrop則在draggable組件放入到droppable組件內觸發，這個里的“放入”指在draggable組件上按下鼠標，然后把draggable組件拖入到droppable組件內部，再放開鼠標的一整個過程。