使用jQuery UI Draggable,Droppable和Sortable

Question

我有一个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',
});

我有两个问题:

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

编辑:我想出了#2,我需要绑定mousedown到可拖动的项目,这使得排序然后禁用它mouseup.仍然遇到#1的问题,似乎有些sortable事件drop在我放下一个项目或者我将鼠标悬停在项目持有者之外时触发了回调.

Answer 1

1:

你的drop()会被调用两次,因为connectToSortable也会触发drop().

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

2:

你的修复工作.但是我会建议一个更容易的选择:保持sortable始终启用并添加选项"handle:h2".(选择您的LI中不存在的任何标记.)这将允许您放入列表,但禁止用户就地排序.

例:

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