jQuery UI可排序 - 允許丟棄到父項

Question

如何讓它成爲一個允許在不同列表之間拖動的jQuery UI排序，還將接受丟棄在父項上？

請參閱this example on JSBin，其中有3個列表，其中一個爲空。拖動任何列表項目並將其放在包裝列表（綠色）的<div>元素上時，我要將該項目移至包含的<ul>（紅色）的末尾。可排序的update函數也需要自動調用。怎麼樣？

$('.sortable').sortable(
{ 
    accept: '.sortable li', 
    connectWith: '.sortable,.container', 
    update: function() { alert('done with the moving'); } 
}); 

我嘗試（不工作）是使含有<div>可投放目標，具體如下：

$('.container').droppable(
{ 
    accept: '.sortable li', 
    drop: function(event, ui) 
    { 
    ui.draggable.appendTo($(this).find('ul')); 
    } 
}); 

Answer 1

您可以通過克隆輔助元素，然後刪除原始的元素做到這一點來自DOM。

請注意，您必須清除樣式屬性，因爲它具有設置爲拖動的position:absolute，這可以防止克隆在ul中正確定位。當然，你可能會更細化有關這一點，並添加/刪除類等

$('.container').droppable(
{ 
    accept: '.sortable li', 
    drop: function(event, ui) 
    { 
    ui.draggable.clone().attr("style", "").appendTo($(this).find("ul")); 
    ui.draggable.remove(); 
    } 
}); 

Here's更新JSBin例子。