IFrame Support

[edge-rps]

I'm interested in using Pragmatic Drag-and-Drop within an iframe component like react-frame-component. Is this supported?

I've seen some discussions online suggesting it might be possible with limitations, but I couldn't find any official documentation on this.

[glani]

+1. Original Ads showed iframe process. Where is it? This is the most interesting part how to get it worked between windows

[edge-rps]

For those that need a quick fix, it's possible to use react-dnd as an alternative and it works with sortable.

https://github.com/react-dnd/react-dnd/ https://react-dnd.github.io/react-dnd/examples/sortable/simple https://codesandbox.io/p/sandbox/iframe-example-ilfwt

[alexreardon]

Great news! Pragmatic drag and drop works with iframes. If it's possible with the web platform, it's possible with Pragmatic drag and drop.

For iframes, you will want to use the external adapter

I hope to post a video with more detail about this whole flow soon.

Here is the demoed example. I would caveat that this example takes some shortcuts that you will need to think about for a production experience. I'll elaborate in the planned video

[yassilah]

Hi! I'm also trying to use Pragmatic drag and drop to drop elements into an iframe within the same document but it doesn't seem to work? I'm most certainly doing something wrong, so I made a basic reproduction here in case you could help me figure it out 😅 https://stackblitz.com/edit/vitejs-vite-fpbsjy?file=src%2FApp.vue

Thanks for all your work!

[alexreardon]

👋 The provided example leveraging react-frame-component is an interesting one. It is rendering content into an iframe, but then trying to control the iframe contents from outside the iframe. Right now that is not supported. Pragmatic drag and drop expects each window to manage it's own drag and drop rather than one window trying to manage another. This approach has the benefit of allowing drag and drop between completely independent iframes.

If the provided example was updated so that the iframe loaded in Pragmatic drag and drop and registered the elements with Pragmatic drag an drop, you would find things would start working.

For reference, here is an example of drag and drop working across iframes:

• Standalone example
• Source for example
• 📺 Talk of mine on this topic: Seamless drag and drop between applications

[alexreardon]

Reopened issue to leave room for the conversation to continue

[WebX47]

I have an remix app and inside it i have an iframe[same-origin]. i'm able to manually add eventListener and everything works [drag,drop etc] but when i use dropTargets from "pragmatic-drag-and-drop" it doesn't work.

[sami616]

Did anyone find a solution for this using react-frame-component?

[Nevoss]

Hi, will allowing the document to be passed as an argument to the draggable function solve the issue?

Or maybe change it to something like that: element.ownerDocument,

Another option might be to export the makeAdapter function so we can reuse it for our needs.

https://github.com/atlassian/pragmatic-drag-and-drop/blob/8aa0418bf518dc67befdd4ca48cf93df624be17c/packages/core/src/adapter/element-adapter.ts#L95

I will love to send a PR about it if it's possible.

@alexreardon

Edit: After some investigation, there are a lot of event bindings to the current window, so seems like big refactor, but if possible I will love to help.