замена элемента списка в неупорядоченном списке

Question

Я Лернер в JQuery.

<ul id="draglist"> 
<li>item1</li> 
<li>item2</li> 
<li>item3</li> 
</ul> 
<ul id="droplist"> </ul> 

У меня есть над 2 списками.

$(function() { 

      $("#draglist").sortable({appendTo: "body", helper: "clone"}); 
      $("#draglist").disableSelection(); 
      $("#droplist").droppable(
         { activeClass: "ui-state-default", 
           hoverClass: "ui-state-hover", 
           accept: ":not(.ui-sortable-helper)", 
           drop: function(event, ui) { 

            var aa=ui.draggable.text(); 
            alert(aa); 
            $(this).find(".placeholder").remove(); 
            $("<li></li>").text(ui.draggable.text()).appendTo(this); 

         } 
      }); 
    }); 

этот фрагмент кода делает мой draglist draggleble и droplist недоступными. Когда я удаляю элемент, он добавит элемент в список. Но я хочу заменить существующий элемент, когда я удаляю элемент во второй список. Как это сделать?

Спасибо заранее

Answer 1

Добавьте это в функцию перетаскивания $("#droplist").children().remove();
Результат должен выглядеть следующим образом:

$(function() { 

    $("#draglist").sortable({ 
     appendTo: "body", 
     helper: "clone" 
    }); 
    $("#draglist").disableSelection(); 
    $("#droplist").droppable({ 
     activeClass: "ui-state-default", 
     hoverClass: "ui-state-hover", 
     accept: ":not(.ui-sortable-helper)", 
     drop: function (event, ui) { 
      $("#droplist").children().remove(); 
      var aa = ui.draggable.text(); 
      alert(aa); 
      $(this).find(".placeholder").remove(); 
      $("<li></li>").text(ui.draggable.text()).appendTo(this); 



     } 

    }); 


}); 

Вот Fiddle