jQuery UIソート可能 - 親へのドロップを許可する

Question

どのようにしてjQuery UIをソート可能にすると、異なるリスト間でドラッグできるようにすることができますか？

this example on JSBinを参照してください.3つのリストがあり、そのうちの1つは空です。リストアイテムをドラッグして、リストをラップする要素（緑色）の<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例これについてより細かくなると、追加/クラスを削除することができます。