Как создать вложенные draggables в Scriptaculous?

Question

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

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

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

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

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