Question

我正在使用Scriptaculous库在应用程序上创建一个吸引人的UI，这有助于最终用户构建列表。让我们说它的披萨创作。

要填写订单，您可以将披萨调色板中的披萨大小拖到订单可放置的订单中。一旦它被放入那里，它就被一个新的div替换，这个div既可以拖动（因为你可以通过将它移回调色板来垃圾）和droppable（因为你可以添加成分）。

然后，您可以将成分调色板中的成分添加到您在订单组中的任何比萨饼中。

我已经成功实现了这些位，一切正常。粘贴剂：如果我试图从放置好的披萨中拖放配料，该披萨已被正确标记为可拖动，并且为了更好的尺寸，它位于比萨饼上方，它反而抓住了披萨批发。这使我无法撤消成分选择，这是此屏幕的关键功能。

有关如何让我做我想做的任何建议？理想情况下，我希望保持简单的拖拽式拖拽UI，因为 worlds 比我们以前使用的更直观。（一个多阶段的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'哦！

Answer 2

试试这个，我认为它接近你想要做的事情。我在左边的列表中使用了sortable。你可能不需要。

<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})
}

如何在Scriptaculous中创建可嵌套的可拖动文件？

2 个答案: