如何使jQuery UI Draggable/Droppable在這種情況下正常工作

Question

我有一個帶有工具按鈕的浮動工具欄。工具欄本身是可拖動的，使用標題爲「基本工具」的標題。在工具欄下方有一個工作區填充整個頁面。工具欄上的按鈕也可拖動並可放置到工作區中。當我將一個按鈕拖放到工作區時，它會變成一個帶有一些內容的矩形小部件。

我的問題是，我想要一個圖標，只有當它在網格工作區，而不是在工具欄上時纔會被刪除。我已經添加了console.log來跟蹤Draggable/Droppable事件，並且如果將該元素放在工具欄上，似乎該工作空間會發出drop事件事件。我想這是因爲工作區在工具欄下面。所以，當它被放在工具欄上時，它應該恢復到工具欄中的初始位置。

Answer 1

您必須確定該工具被刪除：How do I get the coordinate position after using jQuery drag and drop? 您還必須確定您的工具箱放在：http://api.jquery.com/position/ 然後，你必須確定你的工具箱中的寬度和高度：http://api.jquery.com/width/

之後，計算您的工具箱的矩形，並檢查工具是否放在那裏。如果它被放置在那裏然後拒絕掉落，如果不允許掉落。