jquery - 结合 sortable 和 droppable - 将链接添加到拖动的项目

Question

我有一个可拖动项目的列表，可以拖动到可排序和重新排列中。我有那一点工作正常。

我现在要做的是在每个项目被删除后为其添加一个删除链接。我目前的代码触发了两次，所以我要删除每个项目的链接，但我不知道为什么。

这是代码：

    $(function () {
    var order = null;

    $("#sortable")
        .sortable({
            revert: true,
            placeholder: "ui-state-highlight"
        })
        .droppable({
            drop: function (event, ui) {
                addControls(ui.draggable);
            }
        });

    $(".draggable").draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });
    $("ul, li").disableSelection();
});

function addControls($item) {
    $item.append('<a href="#">delete</a>');
}

这里有一个 JS fiddle 可以玩：http: //jsfiddle.net/2X7zk/

Answer 1

作为一个简单的解决方法：

drop: function (event, ui) {
              if (!ui.draggable.find('.delete').length) addControls(ui.draggable);
          }

函数添加控件：

function addControls($item) {
      $item.append('<a href="#" class="delete">delete</a>');
  }

演示