Question

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

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

这是一个jsFiddle：

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

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

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

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

谢谢！

更新

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

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

我试过了：

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

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

Answer 1

也许我误解了这个问题，但我不认为它与“页面切换”有任何关系。如果您同时打开两个页面并尝试将“Box 1”拖动到“Box 4”上方的位置，您将看到它不会触发“Box 4”的Sortable已收到Draggable直到你去下面“Box 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 minefield中测试过）：

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

Answer 4

tolerance: 'intersect的回答产生了我认为可能让你满意的东西，有：

$(".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，当它们可以排序时，它会自动更新您的droppables的位置。这可以防止占位符被删除而不是实际的可放置。

JQuery UI，将Sortable与Droppable相结合

6 个答案: