Search code examples
javascriptweb-applications

Drag content between browser windows

This is a long-shot, and I'm pretty sure it's not possible, but I thought I'd ask just in case someone knows some voodoo that I'm not privy to.

Is it possible at all, under any circumstances, with any browser, even if a plugin of some sort is necessary, to drag an element from one browser window to another?

Solution

  • Dragging between browser windows works by default as long as you use the native JS drag APIs.
    (Tested with Firefox 106.0.5 and Chrome 107.0.5304.107)

    Use event.dataTransfer.setData in your dragstart event handler to set it and event.dataTransfer.getData in your drop event handler to retrieve it.

    Two caveats:

    • The data must be a string. For your use case of dragging HTML elements, this is not a problem, as they're already serialized through their outerHTML property.
    • It does not work cross browser, only between different windows of the same browser.