Scriptaculousでネスト可能なドラッグ可能オブジェクトを作成する方法は？

Question

Scriptaculousライブラリを使用して、エンドユーザーがリストを作成するのに役立つアプリケーションで魅力的なUIを平手打ちしています。ピザの作成用としましょう。

注文を記入するには、ピザパレットからピザのサイズをドロップ可能な注文にドラッグします。そこに配置されると、ドラッグ可能（パレットに戻すことでジャンクできるため）およびドロップ可能（材料を追加できるため）である新しいdivに置き換えられます。

その後、材料パレットの材料を、注文グループに含まれているピザに追加できます。

これらのビットを正常に実装しましたが、すべて正常に動作します。ステッカー：適切にドラッグ可能としてマークされ、適切な方法でピザの上にz位置に配置されたピザから材料をドラッグアンドドロップしようとすると、代わりにピザの卸売を取得します。これにより、この画面の重要な機能である成分の選択を取り消すことができなくなります。

これをどのようにして私が望むことをすることができるかについての提案はありますか？理想的には、以前使用していたものよりも直感的な worlds であるため、単純なドラッグオン、ドラッグオフUIを維持したいです。 （マルチステージHTMLフォーム...震え...）

Answer 1

Scriptaculousは、数日間、さまざまな壁に頭を突っ込んだ後、デフォルトで物事を喜んで入れ子にします。

問題は、 draggable_element への呼び出しが次のようになるときです

<% draggable_element blah blah blah blah blah blah blah%>

の代わりに

<%= draggable_element blah blah blah blah blah blah blah %>

D'oh！

Answer 2

これを試してください、あなたがやろうとしていることに近いと思います。左側のリストにはソート可能を使用しています。必要ないかもしれません。

<table border="1" cellpadding="5">
<tr>
    <td valign="top">
        <ul id='fList' style='border:1px solid #c0c0c0'>
            <li class='fruit'>Apples</li>
            <li class='fruit'>Grapes</li>
            <li class='fruit'>Strawberries</li>
        </ul>
        (drag items or panel)
    </td>
    <td valign="top">
        <div id='fish' class='meat'>Fish</div>
        <div id='chicken' class='meat'>Chicken</div>
        (drop to left list)
    </td>
</tr></table>



Sortable.create("fList", {constraint:false})
new Draggable('fish',{revert:true})
new Draggable('chicken',{revert:true})
new Draggable('fList')
Droppables.add('fList',{accept:'meat',onDrop:function(dragName,dropName){placeFood(dragName,dropName)}})
Droppables.add('fList',{accept:'fruit'})

function placeFood(dragName,dropName) {
    $("fList").insert(new Element("li", { id: $(dragName).id+"_" }))
    $($(dragName).id+"_").innerHTML = $(dragName).innerHTML
    Sortable.destroy("fList")
    Sortable.create("fList", {constraint:false})
}