Geek Answers Handbook

Drag and drop elements between parent frame and child iframe

I am trying to drag elements between parent frame and iframe using jQuery. I have a panel in the parent frame that contains some draggable elements that can be dropped to the child frame. I tried to search a lot, but could not find a lot ...

I tried to work around this by adding an element inside the child frame, and then tried to cause a drag and drop on the newly inserted element programmatically, but I was stuck there too. Could not find the correct way to start the drag and drop function. (The draggable element has a helper element. When I start the drag by calling "mousedown.draggable", the position in the ui-draggable element changes, but I don't see the helper.

Thanks!!

+7
source share
2 answers

Using the HTML5 Drag and Drop API to create Cross Frame and Cross Browser. http://blog.stackhive.com/post/137799349684/building-a-seamless-drag-and-drop-interface

EDIT - the previous link is invalid (dockPHP received rebranding as StackHive), so I wrote out a more complete record, which can help in creating an epic drag and drop interface.

+15
source

AFAIK, if iframes come from different domains, this is not feasible in a “general” way (if you do not control both frames), browser security measures prevent it, otherwise you can wrap a banking site and steal passwords, for example, when logging in.

Some workaround information: http://softwareas.com/cross-domain-communication-with-iframes

If you control both iframes:

Drag and drop between iframes as follows: http://www.dhtmlx.com/docs/products/dhtmlxTree/samples/05_drag_n_drop/06_pro_drag_frame.html

HTML5 Cross Browser Drag and Drop: http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/

Another example: http://jqfaq.com/how-to-implement-drag-and-drop-between-iframes/

+4
source

More articles:


All Articles