How do I drag out of a droppable
4 views
Skip to first unread message
Jason Whitmer
Nov 18, 2009, 12:27:30 PM11/18/09
to Prototype & script.aculo.us
I have several draggables and several droppables on the page. Using
script.aculo.us, I have the ability to put draggables into droppables.
I'm using this code for the onDrop to achieve this:
function drop(dragged, dropped, event) {
dragged.style.top = 0;
dragged.style.left = 0;
dropped.appendChild(dragged);
}
Now I need to remove draggables form droppables. I want to be able to
visually drag a DIV out of a droppable and have it remove it from the
droppable's child array and back into the body element.
My guess is the draggable's onEnd event could trigger this, but I
don't know how to get this to work.
Thank you,
Jason
script.aculo.us, I have the ability to put draggables into droppables.
I'm using this code for the onDrop to achieve this:
function drop(dragged, dropped, event) {
dragged.style.top = 0;
dragged.style.left = 0;
dropped.appendChild(dragged);
}
Now I need to remove draggables form droppables. I want to be able to
visually drag a DIV out of a droppable and have it remove it from the
droppable's child array and back into the body element.
My guess is the draggable's onEnd event could trigger this, but I
don't know how to get this to work.
Thank you,
Jason
Jason Whitmer
Nov 19, 2009, 4:40:57 PM11/19/09
to Prototype & script.aculo.us
I fixed the issue. The trick is to set the html body element as a
droppable.
Droppables.add('body',{accept:'dragme',onDrop:dropBody});
function dropBody(dragged, dropped, event)
{
dropped.appendChild(dragged);
}
And add the ID to the body tag:
<body id="body>
droppable.
Droppables.add('body',{accept:'dragme',onDrop:dropBody});
function dropBody(dragged, dropped, event)
{
dropped.appendChild(dragged);
}
And add the ID to the body tag:
<body id="body>
Reply all
Reply to author
Forward
0 new messages