5

In my scenario an HTML5 page (parent) contains an iframe (child) from a different domain. Ideally I would like to be able to drag an element from the parent into the child.

This works in FireFox but fails in Chrome due to security restrictions (afaik https://bugs.chromium.org/p/chromium/issues/detail?id=251718).

However if I open the same HTML5 page in a different browser instance, drag from there into the iframe of the other instance, then this is allowed.

The reasoning for the security restriction is that the user does not see the URL of the target iframe, but this is true in both scenarios. Why would one work and but not the other?

Sample on http://carsten-leue.de/iframe/cross-domain/

Try to drag drag me into drop here. This is not possible in Chrome. Open the same URL in another browser window and drag drag me from the new window into drop here of the old window. This works.

Carsten
  • 468
  • 4
  • 16

2 Answers2

0

I would like you to use this API since it allows dragging! (not like an image type how your source shows!)

<!-- HTML -->
<body>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</body>

// JavaScript
document.getElementById('elementId').draggable();
// Or if you have a class name
document.getElementsByClassName('elementClass').draggable();
Ryan's World
  • 70
  • 10
0

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.

Source: Drag-Drop elements between parent frame and child iframe

Mai Truong
  • 471
  • 2
  • 8