JQuery UI，结合Sortable和Droppable

Question

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

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

这是一个 jsFiddle：

http://jsfiddle.net/VUuyx/

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

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

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

你能帮助解决这个深奥的难题吗？

谢谢！

更新：

所以我一直在考虑可能的解决方法。 Michal 建议触发 refresh 方法，确实没有解决问题，但让我想到了事件问题。

似乎当您将鼠标移开然后再返回时，会触发正确的事件。也许如果我可以手动触发第一列的 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 来说明我的意思。

Answer 2

至少对于自上而下的下拉，我认为解决方案是将框类设置为 draggable 并将其链接到可排序对象。

$(".box").draggable({
    tolerance: 'point',
    connectToSortable: '.column',
    snap:false,
    helper : 'clone',
});

这个例子创建了一个盒子的副本，但它确实允许我将盒子 1 拖到第 2 页，然后慢慢地将它拖到盒子 5 上方，然后放到顶部。虽然它非常敏感。您可能需要调整网格并捕捉以使其对临时用户始终如一地工作。

我当然可以想象一个可排序的对象不会期望某些东西从顶部下来，因为它期望从容器内对事物进行排序。另一方面，Droppable 期望事物从任何方向进入。

Answer 3

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

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

Answer 4

将@edtechdev 的答案添加到tolerance: 'intersect 产生了一些我认为可能会让你满意的东西，Whit：

$(".column").sortable({
    connectWith: '.column',
    opacity: 0.4,
    tolerance: 'intersect', //<--changed
    placeholder: 'place_holder',
    helper: function(event, el) {
        var myclone = el.clone();
        $('body').append(myclone);
        return myclone;
    },
}).disableSelection();

// ...

function show_page(id) {
    $('.page').removeClass('page_active');
    $('#page_'+id).addClass('page_active');
    $('#page_'+id).find('.column:first').sortable('refresh'); //<- added
}

Answer 5

查看使用 jQuery 和 Asp.Net MVC 构建的拖放门户，它在博客文章中有所有实现：http://lakkakula.wordpress.com/2009/06/15/web-2-0-portal-using-asp-net-mvc-microsoft-ajax-client-templates-and-jquery-with-drag-and-drop-widget-personalization/

Answer 6

Sortable 有一个未记录的选项refreshPositions，当它们也可排序时，它会自动更新您的 droppable 的位置。这可以防止占位符可放置而不是实际可放置。