Javascript 如何在jQueryUI中使用Dragable和Dropable将拖动的li附加到可拖放的ui中？

这是我想做的 HTML

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

---

我想将li拖到另一个UL中，而li必须附加到已删除的UL中。

希望这对您有所帮助

演示：

感谢@Barry Pitman

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

    $(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" );
    }
});
});