如何在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!");
                }
            });
        });

我想将li拖入另一个UL，并且li必须附加到已删除的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" );
    }
});
});