jquery - jqueryアイテムをキャンバスにドラッグし、リストにドラッグして戻します

Question

jqueryを使用して<li>アイテムをキャンバスにドラッグしていますが、うまく機能します。しかし、アイテムをリストにドラッグしようとすると、機能しません。助けてください。

ソースは次のとおりです。

$("#group1").sortable({
    revert: true
});         


$('li[id^="item"]').draggable({
    // connectToSortable: "#group1",
     helper: function(){
        $copy = $(this).clone();
        return $copy;
     },
     start: function(event, ui) {
        dropped = false;
        $(this).addClass("hide");
    },
    stop: function(event, ui) {
        if (dropped==true) {
            $(this).remove();
        } else {
            dropped=false
            $(this).removeClass("hide");
        }
        $('#'+$(this).attr('id')).draggable({
            connectToSortable: "#group1",
            //helper: "clone",
            revert: "invalid"

        });
    }
});


var dropped = false;
$( "#canvas" ).droppable({              
    drop: function(event, ui) {
        dropped = true;
        $.ui.ddmanager.current.cancelHelperRemoval = true;
        //ui.helper.appendTo(this);
    }
});