Drag-Drop elements between parent frame and child iframe

jquery drag-and-drop jquery-ui-sortable jquery-ui-draggable droppable
ksb picture ksb · Feb 4, 2013 · Viewed 23.3k times · Source

I am trying to drag-drop elements between parent frame and iframe using jQuery. I have a panel in parent frame which contains some draggable items which can be dropped on the child frame. I tried to search a lot but couldn't find much...

I tried to work around it by appending the element inside the child frame and then trying to trigger draggable on the newly inserted element programmatically, but I got stuck there as well. Couldn't find the proper way to trigger the drag function. (The draggable element has a helper. When I trigger drag by triggering "mousedown.draggable" the position on the ui-draggable element changes but I cannot see the helper.

Thanks!!

Answer

ksb picture ksb · Mar 6, 2014

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

EDIT - The previous link wasn't valid (dockPHP got rebranded as StackHive) so have written out a more complete post that can help in creating an epic drag and drop interface.

Related questions

Preventing click event with jQuery drag and drop

I have elements on the page which are draggable with jQuery. Do these elements have click event which navigates to another page (ordinary links for example). What is the best way to prevent click from firing on dropping such element …

Read More
jQuery UI Sortable and two connected lists

I am trying to put together the following with jQuery and Sortable: There are two cases that I need to grab: A: move an item within the same list B: move an item from one list to another Case B …

Read More
jQuery Sortable with animation

I'm using jQuery and Sortable to arrange my list of items (and this http://dragsort.codeplex.com). All works perfect. I'm using a function on dragEnd to arrange the lists in order. Here is my code: $("#list1, #list2").dragsort({ dragSelector: "…

Read More