如何在 jQuery UI 中使用 Draggable 和 Droppable 将拖动的 li 添加到可放置的 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" );
    }
});
});