Combining sortable and droppable - adding link to dragged item

Question

I have a list of draggable items that can be dragged into a sortable and rearranged. I have that bit working ok.

What I am now trying to do is to add a delete link to each item once it has been dropped. The code I currently have fires twice so I get to delete links for each item and I can't figure out why.

Here's the code:

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

There's a JS fiddle here to play with: http://jsfiddle.net/2X7zk/

possible duplicate of [Drop() gets called twice with Sortable/Droppable](http://stackoverflow.com/questions/10914503/drop-gets-called-twice-with-sortable-droppable) — A. Wolff, Jun 14 '13 at 09:17

score 0 · Accepted Answer · answered Jun 14 '13 at 09:22

0

As a simple workaround:

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

answered Jun 14 '13 at 09:22

A. Wolff

74,033
9
94
155

Thanks, that worked a treat! Really appreciate the fast response. – jhob101 Jun 14 '13 at 10:39

Combining sortable and droppable - adding link to dragged item

1 Answers1