Forum: Rails Spinoffs (closed, excessive spam) Can you make a Sortable also Droppable?

I would like to be able to drop a Draggable element into an existing
Sortable list, and have that element "join" the sort. It seems to me
that I would need to remove the existing Sortable, and then re-create
it once the new element is in place. But that's as far as I've gotten
in my musings. Can anyone point out an example of this pattern that I
could pick apart?

This is a re-stating of a question I asked yesterday, which didn't
get any answers yet.

Thanks in advance,

Walter

It seems that this list is so silent this days

I make 2 questions about sortables/draggables/droppables without
success too

Good luck!

Try this:

<table border="1" cellpadding="5">
  <tr>
    <td valign="top">
      <ul id='fList'>
        <li>Apples</li>
        <li>Grapes</li>
        <li>Strawberries</li>
      </ul>
    </td>
    <td valign="top">
      <div id='fish' class='meat'>Fish</div>
      <div id='chicken' class='meat'>Chicken</div>
    </td>
  </tr>
</table>


Code:

Sortable.create("fList", {constraint:false})
new Draggable('fish',{revert:true})
new Draggable('chicken',{revert:true})
Droppables.add('fList',
{accept:'meat',onDrop:function(dragName,dropName)
{placeFood(dragName,dropName)}})

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

}

Thanks very much, this helps a lot.

This snippet will need more work for my application because it allows
for duplicate IDs. I'll probably get the ID from the database, and
save the newly-dropped object there before re-initializing the sortable.

But if anyone can clarify -- how would you use Element#identify in
this context? That would seem to be what it is built for.

Walter

Yeah, I just threw it together as cheap-and-cheerful when I read your
message to see if it would work.

I look back to my pre-prototype/scripty days and think about how much
work coding used to be. To think we can do stuff like this in a few
line of code cooks my brain.

I totally agree. This little addition (setting a var outside of the
function and incrementing it) made the example work perfectly as a
plaything. Rolling in the Ajax callback to get the "real" id will be
another moment's work.

  Sortable.create("fList", {constraint:false})
  new Draggable('fish',{revert:true,ghosting:true})
  new Draggable('chicken',{revert:true,ghosting:true})
  Droppables.add('fList',
  {accept:'meat',onDrop:function(dragName,dropName)
  {placeFood(dragName,dropName)}})
  var added = 0;
  function placeFood(dragName,dropName) {
    added ++;
    $("fList").insert(new Element("li", { id: $(dragName).id+added }))
    $($(dragName).id+added).innerHTML = $(dragName).innerHTML
    Sortable.destroy("fList")
    Sortable.create("fList", {constraint:false})

  }

Thanks so much for the clarity.

Walter