How to append dragged li in to droppable ui using Draggable and Droppable in jQuery UI?

Question

Here what i want to do 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!");
                }
            });
        });

i want to drag li into another UL and li has to append into dropped UL.

Answer 1

Hope this will help you.

Demo: 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" );
    }
});
});