1

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

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

4

1 回答 1

8

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');
  }
});
于 2011-03-30T20:11:24.483 回答