JQuery UI,将Sortable与Droppable相结合

Question

我正在尝试将JQuery UI 可排序与droppable相结合,以创建多个页面来删除和排序事物.我在这里设置了一个带有独立演示的博客条目:

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

这是一个jsFiddle:

http://jsfiddle.net/VUuyx/

请注意,您可以拖动以对框进行排序,甚至可以对其他列进行排序.您也可以单击页面按钮切换页面.我的问题在于结合这两个特征:

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

我不确定,但我想我需要以某种方式清除事件,或手动触发它们.问题似乎源于这样一个事实,即拖动的盒子在可见时位于柱子上方.

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

谢谢!

更新:

所以我一直在考虑可能的工作.Michal建议启动刷新方法,这确实无法解决问题,但让我思考事件问题.

似乎当你离开然后再回来时,适当的事件就会发生.也许如果我可以手动触发第一列的mouseout事件,重置将允许mouseover事件正确触发.

我试过这个:

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

但我不认为这与可排序的事件是一样的.也许我应该解雇那个事件？

Answer 1

是的，添加 $('.column').sortable("refresh"); show_page(id) 函数的结尾对我有用（仅在 Firefox 雷区中测试）：

function show_page(id) {
    $('.page').removeClass('page_active');
    $('#page_'+id).addClass('page_active');
    $('.column').sortable("refresh");
}