Jquery ui 使用jQuery UI可拖动、可拖放和可排序

我有一个可拖动项目的

ul

（#文档编辑器选项ul li），一个用于放置这些项目的区域

（#文档编辑器内容）

，以及一个位于该区域内的

ul

，用于存放这些项目

（#项目持有者）

，这是可排序的。这种拖放只是单向的，只能将列表中的项目拖放到支架中

$("#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

回调被调用两次。我认为这与

#物品持有者

可排序有关。我希望只有当我将一个项目放入列表中并且只知道该项目在回调中的

事件

和

ui

时，它才会被触发

我还需要默认情况下，

项目持有者

不可排序的功能。它唯一可排序的时间是当您将一个项目拖动并悬停在其上时。因此，默认情况下我无法对列表进行排序，但如果我将一个项目拖到列表上，我可以选择将该项目放置在列表中的位置（即列表现在可排序），一旦我将其拖放，列表将再次变得不可排序

EDIT:我发现#2，我需要将

mousedown

绑定到可拖动项目，该项目启用排序，然后在

mouseup

上禁用排序。#1仍然存在问题，当我将物品放入或悬停在物品夹外时，一些可排序的

事件似乎正在触发
drop
回调。
1：
您的drop（）会被调用两次，因为connectToSortable也会触发drop（）

我的建议是完全删除$（“#doc editor content”）.droppable（），而是将receive（e，ui）处理程序添加到您的排序表中

2:
你的办法行得通。然而，我会建议一个更简单的选择：始终启用sortable，并添加选项“handle:h2”。（选择您的LIs中不存在的任何标记。）这将允许您进入列表，但在适当位置禁用用户排序

例如：

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

1:
您的drop（）会被调用两次，因为connectToSortable也会触发drop（）

我的建议是完全删除$（“#doc editor content”）.droppable（），而是将receive（e，ui）处理程序添加到您的排序表中

2:
你的办法行得通。然而，我会建议一个更简单的选择：始终启用sortable，并添加选项“handle:h2”。（选择您的LIs中不存在的任何标记。）这将允许您进入列表，但在适当位置禁用用户排序

例如：

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