2

我正在使用 Scriptaculous 库在帮助最终用户构建列表的应用程序上打造吸引人的 UI。让我们说它用于披萨制作。

要填写订单，您可以将披萨调色板中的披萨尺寸拖到可放置的订单中。一旦它被放在那里，它就会被一个新的 div 替换，该 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 %>

哦！

于 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 回答