Drag and drop in jQuery
Date: 01/22/08
(Web Development) Keywords: no keywords
How do I clone something that's being dragged and dropped, and have the clone be draggable?
----------------------------------
I'm just starting to migrate some drag-and-drop code that uses X library to jQuery. What I had before is an interface like this:
2 DIV containers, "frombox" and "tobox". In frombox there's a bunch of images ("items"). When you drag one from frombox to tobox it's copied. When you drag it back it's deleted. I had this working before, but I'm right now I'm stuck at one problem when trying to do it with jQuery
So far with the jQuery version I can drag them back and forth without copying, and I can drag them down from "frombox" to "tobox" WITH copying, but the clones become undraggable. My code looks like:
$("#tobox").droppable({
accept: ".itemimage",
tolerance: 'touch',
drop: function(ev, ui) {
var dropped = ui.draggable.element;
$(dropped).clone().appendTo(this);
}
});
Which allows copies to be dragged and dropped
But slapping "draggable()" inside that last chain doesn't work. Neither of these variations work:
$(dropped).clone().draggable().appendTo(this);
$(dropped).clone().appendTo(this).draggable();
I've been staring at this for a while now, but I just don't know what it is. I just know it's gonna turn out to be something really stupid....
Source: http://community.livejournal.com/webdev/460364.html