Drag-Drop elements between parent frame and child iframe

AFAIK, if iframes come from different domains, this is not doable in a “common” way (unless you control both iframes), browser security measures prevent it, otherwise you could wrap a banking website and steal passwords, for example, when you log in. Some info on workarounds: http://softwareas.com/cross-domain-communication-with-iframes If you control both iframes: Drag & Drop between … Read more

Programmatically drag and drop element onto another element

This is how the jQuery UI team programmatically trigger drop event. droppable_events.js: draggable = $( “#draggable1” ).draggable(), droppable1 = $( “#droppable1” ).droppable( config ), droppable2 = $( “#droppable2” ).droppable( config ), droppableOffset = droppable1.offset(), draggableOffset = draggable.offset(), dx = droppableOffset.left – draggableOffset.left, dy = droppableOffset.top – draggableOffset.top; draggable.simulate( “drag”, { dx: dx, dy: dy }); … Read more

jQuery draggable + droppable: how to snap dropped element to dropped-on element

I found that Keith’s method worked for me. Since his answer doesn’t include an example implementation, I’ll post mine: $(‘.dropTarget’).droppable({ drop: function(ev, ui) { var dropped = ui.draggable; var droppedOn = $(this); $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); } }); or, slightly more concisely: $(‘.dropTarget’).droppable({ drop: function(ev, ui) { $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this); } });