Как создать в Scriptaculous вложенные перетаскиваемые объекты?

Question

Я использую библиотеку Scriptaculous для добавления привлекательного пользовательского интерфейса в приложение, которое помогает создавать списки конечных пользователей. Допустим, это для создания пиццы.

Чтобы выполнить заказ, вы перетаскиваете размер пиццы из палитры пиццы в списки заказов. Как только он помещается туда, он заменяется новым div, который можно перетаскивать (потому что вы можете выбросить его обратно в палитру) и сбрасывать (потому что вы можете добавлять в него ингредиенты).

Затем вы можете добавить ингредиенты из вашей палитры ингредиентов в любую из пицц, которые вы сидите в группе заказов.

Я успешно реализовал эти биты, и все работает отлично. Палка: если я попытаюсь перетащить ингредиент из помещенной пиццы, которая должным образом помечена как перетаскиваемая и которая, для хорошей меры, расположена по z над пиццей, она вместо этого захватывает пиццу оптом. Это делает невозможным отмену выбора ингредиентов, что является ключевой особенностью этого экрана.

Любые предложения о том, как я могу заставить это делать то, что я хочу? В идеале я хотел бы сохранить простой перетаскиваемый пользовательский интерфейс, поскольку он более интуитивен, чем то, что мы использовали ранее. (Многоступенчатая форма 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

Попробуйте это, я думаю, это близко к тому, что вы пытаетесь сделать. Я использую сортировку для списка слева. Вам может не понадобиться.

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