How to create nestable draggables in Scriptaculous?

Question

I'm using the Scriptaculous library to slap an appealing UI on an application which helps an enduser build lists. Let's say its for pizza creation.

To fill out an order, you drag a size of pizza from the pizza palette into the orders droppable. Once it is put in there, it gets replaced with a new div which is both draggable (because you can junk it by moving it back to the palette) and droppable (because you can add ingredients to it).

You can then add ingredients from your ingredients palette to any of the pizzas you have sitting in the group of orders.

I've successfully implemented these bits and everything works fine. The stickler: if I attempt to drag and drop the ingredient from a placed pizza, which is properly marked as draggable and which, for good measure, is z-positioned above the pizza, it instead grabs the pizza wholesale. This makes it impossible for me to undo ingredient selections, which is a key feature for this screen.

Any suggestions on how I can get this to do what I want? Ideally I'd like to keep the simple drag-on, drag-off UI as it is worlds more intuitive than what we were using previously. (A multi-stage HTML form... shudder...)

Answer 1

Try this, I think it's close to what you're trying to do. I'm using a sortable for the list on the left. You may not need to.

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

Answer 2

It turns out, after a few days of banging my heads into various walls, that Scriptaculous will happily nest things by default.

The issue is when your call to draggable_element looks like this

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

instead of

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

D'oh!