jquery将项目拖动到画布并将其拖回列表

Question

我正在使用jquery将<li>项拖到画布中并且工作正常。 但是当我尝试将项目拖回列表时，它不起作用。你能帮帮我吗？

以下是source：

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

Answer 1

画布只是一大块像素。它不是其他节点的“容器”元素。

如果在拖动元素后在代码中更仔细地查看DOM树，您会发现它们根本没有被添加到画布中。