Drag and drop in jQuery
Date: 01/22/08
(WebDesign) Keywords: java, web
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();
(cross-post: javascript, webdesign )
Source: http://community.livejournal.com/webdesign/1355603.html