除使用draggable插件拖曳任意元素外，還可以調用droppable UI插件將拖曳后的任意元素放置在指定區域中，類似購物車效果，調用格式如下：
$(selector).droppable({options})
selector參數為接收拖曳元素，options為方法的配置對象，在對象中，drop函數表示當被接收的拖曳元素完全進入接收元素的容器時，觸發該函數的調用。
例如，在頁面中，通過調用droppable插件將“產品區”中的元素拖曳至“購物車”中，同時改變“購物車”的背景色和數量值，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，先調用draggable插件任意拖曳“產品區”的元素，然后，調用droppable插件綁定“購物車”中接收元素，當“產品區”元素完全拖曳至“購物車”時，觸發定義的drop函數，改變“購物車”中背景色和總數量值。
我來試試，親自將產品區中的元素拖曳至回收站中
在下列代碼的第27、28、29行代碼中，構建定義的drop函數代碼，改變“回收站”元素的背景色和顯示的內容。
$(this)方式獲取“回收站”元素本身，其次，通過元素本身的addClass()方法添加新背景樣式。find()方法獲取顯示內容元素，并將它顯示的內容設置為空。請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報