结合可排序和可放置 - 将链接添加到拖动的项目

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

函数addControls：

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

DEMO