2

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

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

次に、注文のグループにあるピザのいずれかに、材料パレットから材料を追加できます。

これらのビットを正常に実装し、すべて正常に動作します。執着者: 配置されたピザから材料をドラッグ アンド ドロップしようとすると、ドラッグ可能として適切にマークされ、適切な測定のためにピザの上に z 配置され、代わりにピザのホールセールを取得します。これにより、この画面の重要な機能である材料の選択を元に戻すことができなくなります。

これをどうやってやりたいことができるかについての提案はありますか? 理想的には、単純なドラッグ オン、ドラッグ オフ UI を維持したいと考えています。これは、以前使用していたものよりも直感的な世界だからです。(多段階の HTML フォーム...身震いする...)

4

2 に答える 2

2

数日私の頭をさまざまな壁にぶつけた後、Scriptaculousはデフォルトで物事を喜んで入れ子にすることがわかりました。

問題は、への呼び出しがdraggable_element次のようになっている場合です

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

それ以外の

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

D'oh！

于 2008-10-13T04:08:25.203 に答える
0

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

<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})
}
于 2008-10-09T12:46:49.307 に答える