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樹，您會發現它們並未添加到畫布中。