在这种情况下，如何使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/

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