Drag and Drop DOM elements between between multiple electron windows. possible?


#1

Hi there. I’m new to electron and I’m already in love :wink:
But here is one thing I spent 1day+ trying to solve but got stuck:

Is it possible to implement drag and drop operations between multiple electron windows?

I am building a visual HTML editor. I want to have a native “library” window and another “page” window. No I want to drag items from one window to the other.

What would be the best solution for that?

Thanks in advance and happy coding,
Simon


#2

Hi Simon,

It is possible. I’ve done this for my dockable window framework. What I have done is, when drag-start, sending an ipc message to all windows. and when drag-end or drag-accepted, sending another ipc message.


#3

Thanks jwu.
I finally got it working. Native HTML5 Drag and Drop in combination with IPC messaging was the solution.
I’m really LOVIN’ electron!
Happy Coding,
–Simon


#4

I’d really like to implement this. Any sample code you can share?


#5

I didn’t write an example for this (I think I will), but you can check how I implement this in here: https://github.com/cocos-creator/editor-framework/blob/master/lib/renderer/ui/utils/dock-utils.js#L63, basically this code let allow me drag a window to another window so that it can dock the window back to the main window (just like what Visual Studio’s panel system). So when drag start, I have to broadcast IPC message to all the other window to make them prepare for it.


#6

Please please please write an example for this. Would be amazing!
Did I say please? Please :slight_smile: