【问题标题】：Working with jQuery UI Draggable, Droppable and Sortable使用 jQuery UI Draggable、Droppable 和 Sortable
【发布时间】：2011-07-26 07:51:17
【问题描述】：

我有一个ul 的可拖动项目(#doc-editor-options ul li)，一个用于放置这些项目的区域(#doc-editor-content)，并在该区域内有一个ul 用于存放这些项目(#items-holder)，这是可排序的。这种拖放只是单向的，只能将列表中的项目拖放到持有人中。

$("#doc-editor-options ul li").draggable({
    helper: 'clone',
    connectToSortable: '#item-holder',
    containment: $(".doc-editor")
});
$("#doc-editor-content").droppable({
    drop: function(e, ui){
        console.log('dropped');
    }
});
$("#item-holder").sortable({
    placeholder: 'placeholder-highlight',
    cursor: 'pointer',
});

我有两个问题：

现在，当我将一个项目从列表中拖放到另一个列表中时，.droppable() 的 drop 回调被调用了两次。我认为这与#item-holder 可排序有关。我希望它只在我将一个项目放入列表并且只知道回调中的 event 和 ui 时才被触发。
我还需要默认情况下items-holder 不可排序的功能。它变得可排序的唯一时间是当您将项目拖动并悬停在其上时。所以默认情况下我不能对列表进行排序，但是如果我将一个项目拖到它上面，我可以选择将该项目放在列表中的哪个位置（即列表现在是可排序的），一旦我放下它，列表就会变得不可排序再次。

编辑：我发现#2，我需要将mousedown 绑定到启用排序的可拖动项目，然后在mouseup 上禁用它。 #1 仍然存在问题，当我将项目放入或悬停在项目持有者之外时，似乎某些 sortable 事件正在触发 drop 回调。

【问题讨论】：

标签： jquery-ui jquery-ui-sortable droppable jquery-ui-draggable

【解决方案1】：

1：

你的 drop() 被调用了两次，因为 connectToSortable 也触发了 drop()。

我的建议是完全删除 $("#doc-editor-content").droppable()，而是将 receive(e, ui) 处理程序添加到您的 sortable。

2：

您的修复有效。但是我会建议一个更简单的选择：始终启用可排序并添加选项“handle：h2”。（选择您的 LI 中不存在的任何标签。）这将让您进入列表，但禁用用户就地排序。

例子：

$('#item-holder').sortable({
  placeholder: 'placeholder-highlight',
  cursor: 'pointer',
  handle: 'h2',
  receive: function(e, ui) {
    console.log('dropped');
  }
});

【讨论】：