如何在jQuery UI中使用Draggable和Droppable將拖動的li添加到droppable ui中？

Question

這裏是我想要做的 HTML

<ul class="droppable"> </ul> 
<ul class="droppable"> 
<li class="draggable"> Item 1</> 
<li class="draggable"> Item 2</> 
</ul> 

jQuery的

$(function() { 
      $(".draggable").draggable(); 
      $(".droppable").droppable({ 
       drop: function (event, ui) { 
        alert("Dropped!"); 
       } 
      }); 
     }); 

我想拖李到另一個UL和李有權追加到下降UL。

Answer 1

希望這會幫助你。

演示：http://jsfiddle.net/x5T4h/519/

$(function() { 
$(".drag li").each(function(){ 
    $(this).draggable({ 
     helper: "clone" 
    }); 
}); 

$(".droppable").droppable({ 
    activeClass: "ui-state-hover", 
    hoverClass: "ui-state-active", 
    accept: ":not(.ui-sortable-helper)", 
    drop: function(event, ui) { 
     var targetElem = $(this).attr("id"); 
     $(ui.draggable).clone().appendTo(this); 
    } 
}).sortable({ 
    items: "li:not(.placeholder)", 
    sort: function() { 
     $(this).removeClass("ui-state-default"); 
    } 
}); 
});