如何使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/

之后，计算您的工具箱的矩形，并检查工具是否放在那里。如果它被放置在那里然后拒绝掉落，如果不允许掉落。