Drag & Drop Functionality?

[lucenta]

Is there anyway to add drag & drop functionality from the web GUI to native OS?

I'm using CHOC as the UI for a JUCE application & unfortunately it seems that using a webview overrides any ability to listen to mouse events on the JUCE side, thus negating the ability to handle any drag and drop from JUCE itself.

I'm attempting to drag files (stored locally) from the web view UI to the native OS (i.e folder, DAW, etc.).

Countless forums online left me at a dead end to implementing this on the javascript side. I see electron has this functionality https://www.electronjs.org/docs/latest/tutorial/native-file-drag-drop

Is it possible to implement something similar here?

thanks!

[julianstorer]

Yes, I'm aware of this, and I also need some drag and drop in my own apps, so will have to take a look at this. Not sure how soon I'll get around to it though.
I think attempting to do it on the webview side is a dead end because of security policies, so it'll have to be a messy native hack in the webview code, unfortunately, and could involve quite a lot of work

[lucenta]

Yeah, I ran into a bunch of security policies too unfortunately.

If i was familiar I would try to implement it myself!

Thank you for the reply

[lucenta]

Hey Julian! I'm wondering if you have any update here?

[julianstorer]

Sorry! Still on my roadmap, but haven't had chance to look into it yet

[lucenta]

Hello there, sorry to bother again but wondering if you have a timeline for a fix here. ty :)

[lucenta]

Hey Julian! Sorry to bother again but just wondering if you've given this a chance, thanks

[julianstorer]

Sorry, I've not had an urgent need to tackle this one yet!

[meteaurestudios]

@lucenta I had a similar issue dragging and dropping files out of a webview on a JUCE based plugin. I'm using the webview embedded in JUCE 8, but someone using choc has taken part of the discussion, so I guess the fix would be the same here. Check out this topic.

[julianstorer]

FYI I did start some drag-and-drop work on a branch called test-dnd, and did it for DesktopWindow. Then realised that if there's a webview in the window, it doesn't work, and will require a lot of platform-specific hackery to get it working on all the webviews, which I didn't have time to do. If anyone fancies carrying on with that branch (or just throw it at Claude Code and see how it does!) then that'd get things moving!

[danielraffel]

Hey @julianstorer — you said to throw it at Claude Code, so I had a proper go at it. File drag-and-drop is working both directions on a branch: https://github.com/danielraffel/choc/tree/poc/webview-dnd

It all lives in choc_WebView.h, no new dependencies. Two entry points from JS:

• Drag out: window.chocStartFileDrag(["/abs/path", ...]) on pointerdown/mousedown.
• Drop in: listen for a chocfilesdropped event — e.detail.paths is the array of file paths.

There's a runnable example so you don't have to wire anything up — examples/webview_drag_and_drop.cpp (added to the examples CMake). Build the examples, run webview_drag_and_drop, and you get a window with a "drag me out" box and a drop zone: drag the box into Finder/Explorer/a file manager, and drag files back onto the window.

Where it stands per platform:

• macOS (WKWebView) and Linux (WebKitGTK) — both directions. mac overrides mouseDragged: on the WKWebView subclass to start an NSDraggingSession; Linux kicks off gtk_drag_begin from the live motion-notify event, with the usual NSDraggingDestination/gtk_drag_dest inbound. One Linux gotcha that cost me a bit, in case it saves you the time: the webview is both the drag source and a drop target, so an outbound drag instantly drops on itself unless you gtk_drag_dest_unset for the duration — handled on the branch.
• Windows (WebView2) — inbound works (an IDropTarget on the host HWND plus the render child HWNDs, forwarding CF_HDROP to JS). Tested on a Win11 box.

The thing I want your read on before pushing further is Windows outbound. choc uses windowed WebView2, and as far as I can tell you can't start a drag from web content in that mode — the render HWND eats the input and the only DragStarting hook lives on the composition controller. Doing it properly on Windows basically means moving the Windows backend to composition/visual hosting (DComp + feeding input through SendMouseInput), which touches sizing/focus/input for everyone, so I didn't want to bulldoze that in. For now it's a documented no-op on Windows (the JS call still exists for parity) rather than a flaky HWND-subclassing hack.

A few ways it could go, your call:

1. Take mac + Linux (both directions) + Windows inbound as-is, leave Windows outbound as a known gap.
2. Go the composition-hosting route on Windows for full outbound — happy to take a swing at it if you'd entertain that.
3. You drive the Windows side and I'll make the rest match.

The branch is there to pull from or cherry-pick either way. I've actually got a real use for this, so I'm motivated to get it over the line however fits choc best — let me know how you'd like to play it.