javascript - JQuery UI，将可排序与可删除相结合

Question

我正在尝试将 JQuery UI sortable 与 droppable 结合起来，创建多个用于放置和排序内容的页面。我在这里设置了一个带有独立演示的博客条目:

http://whit.info/blog/2009/06/06/jquery-ui-combining-sortable-with-droppable/

这是一个 jsFiddle:

http://jsfiddle.net/VUuyx/

请注意，您可以拖动对框进行排序，甚至可以拖动到其他列中。您也可以点击页面按钮来切换页面。我的问题在于结合这两个功能:

通过使用droppable，我允许用户将一个框拖到页面按钮上，然后页面将切换，用户可以完成将其拖到新显示的页面。问题是，当页面切换时，出现在拖动框下方的第一列没有 over 事件触发。您必须拖动到另一列，然后返回到第一列才能显示占位符。

我不确定，但我认为我需要以某种方式清除事件，或者手动触发它们。该问题似乎源于这样一个事实:当其可见时，拖动的框位于列上方。

你能帮助解决这个深奥的困境吗？

谢谢!

更新:

所以我一直在考虑可能的解决方法。 Michal 建议触发刷新方法，这确实不能解决问题，但让我思考事件问题。

似乎当您将鼠标移开然后再次返回时，会触发适当的事件。也许如果我可以手动触发第一列的 mouseout 事件，重置将允许 mouseover 事件正确触发。

我尝试过这个:

$(".column:first").trigger('mouseout'); 

但我不认为这与 sortable 的 out 事件相同。也许我应该触发那个事件？

Answer 1

也许我误解了这个问题，但我不认为它与“页面切换”有任何关系。如果您同时打开两个页面并尝试将“Box 1”拖动到“Box 4”上方的位置，您会发现它不会触发“Box 4”的Sortable已收到Draggable，直到您进入“方框 4”下方。这并不能解决您的问题，但也许会帮助您寻找更好的解决方案。

参见http://jsfiddle.net/nkBNP/7/用于演示我的意思的 JSFiddle。