1

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',
});

我有两个问题：

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

编辑：我想出了＃2，我需要将items-holder绑定到可拖动的项目，这些项目会启用排序，然后在mousedown上禁用它。仍然遇到＃1的问题，当我放下一个项目或者我将鼠标悬停在项目持有者之外时，似乎某些mouseup事件正在触发sortable回调。

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');
  }
});

使用jQuery UI Draggable，Droppable和Sortable

1 个答案:

1

2：