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树，您会发现它们并未添加到画布中。