Comment créer des draggables imbriqués dans Scriptaculous?

Question

J'utilise la bibliothèque Scriptaculous pour claquer une interface utilisateur attrayante sur une application qui aide les listes de construction d'un utilisateur final. Disons que c'est pour la création de pizza.

Pour remplir une commande, vous faites glisser une taille de pizza de la palette de pizza dans la liste déroulante des commandes. Une fois qu'il est mis là, il est remplacé par un nouveau div qui est à la fois draggable (parce que vous pouvez le rebuter en le déplaçant vers la palette) et droppable (parce que vous pouvez ajouter des ingrédients).

Vous pouvez ensuite ajouter des ingrédients de votre palette d'ingrédients à l'une des pizzas que vous avez dans le groupe de commandes.

J'ai implémenté avec succès ces bits et tout fonctionne correctement. Le stickler: si je tente de faire glisser et déposer l'ingrédient d'une pizza placée, qui est correctement marqué comme draggable et qui, pour faire bonne mesure, est positionné en z au-dessus de la pizza, il attrape plutôt la pizza en gros. Cela rend impossible pour moi d'annuler les sélections d'ingrédients, ce qui est une caractéristique clé pour cet écran.

Des suggestions sur comment je peux obtenir ce que je veux faire? Idéalement, je voudrais garder le simple drag-on, drag-off UI car il est mondes plus intuitive que ce que nous utilisions précédemment. (Un formulaire HTML multi-étape ... shudder ...)

Answer 1

Il se trouve, après quelques jours de frapper mes têtes dans divers murs, qui se fera un plaisir Scriptaculous choses imbriquer par défaut.

La question est quand votre appel à draggable_element ressemble à ce

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

au lieu de

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

D'oh!

Answer 2

Essayez ceci, je pense que c'est proche de ce que vous essayez de faire. J'utilise un sortable pour la liste sur la gauche. Vous n'avez peut-être pas besoin de le faire.

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