Объединение сортируемых и 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 здесь, чтобы играть с: 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>'); 
    }