droppable構(gòu)建了一個(gè)可拖入的區(qū)域。droppable組件往往和draggable組件一起使用，可以將draggable組件拖入到droppable組件內(nèi)，實(shí)現(xiàn)自身想達(dá)到的效果，我們首先通過一個(gè)極為簡(jiǎn)單的回收站例子來了解一下droppable組件。

　　下面分別是拖入前和拖入后的效果圖。 　　 　　其實(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)部（即垃圾桶中），通過jQuery將該文件圖標(biāo)從頁(yè)面中刪除，同時(shí)將空垃圾桶圖標(biāo)變換為滿垃圾桶圖標(biāo)即可。 　　 　　droppable組件屬性：

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

方法就三個(gè)，很簡(jiǎn)單，也不多做說明。

　　droppable組件事件：

　　這四個(gè)事件的參數(shù)都一樣，e是js中的event對(duì)象，source是被放入的draggable組件的DOM。 　　onDragEnter和onDragLeave分別在draggable組件進(jìn)入和離開droppable組件時(shí)觸發(fā)，只觸發(fā)一次。 　　onDragOver事件是在draggable組件在droppable組件內(nèi)部移動(dòng)時(shí)觸發(fā)，每移動(dòng)一下觸發(fā)一次，可以通過該事件實(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)部，再放開鼠標(biāo)的一整個(gè)過程。