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

时间:2013-06-14 08:58:44

标签: jquery draggable jquery-ui-sortable droppable

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

我现在要做的是在删除每个项目后添加一个删除链接。我目前的代码触发了两次,所以我删除了每个项目的链接,我无法弄清楚原因。

以下是代码:

    $(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小提琴:http://jsfiddle.net/2X7zk/

1 个答案:

答案 0 :(得分:0)

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

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

function addControls:

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

DEMO