Non conventional drag and drop and understanding events flow.

First of all, a bit of context into what I am trying to do.

I am working on a solution to embed a web browser inside a desktop video editing application which is implemented in C++. The web browser itself is embedded via Berkelium (
Berkelium provides a way of embedding Chromium in things like game engines.

I am successfully running a Vaadin application within that web browser and I would like to be able to interact both ways between the Vaadin application and the host desktop application via some sort of drag and drop of content.

Berkelium allows you to link the client-side JavaScript runtime of a web application with the C++ runtime of the host application by hooks to invoke C++ functions from JavaScript and vice versa.

I have written a pure JavaScript solution which allows me to replicate a two-way drag and drop and it works as follow:
To drag from the web application running in the web browser:
-I detect when the mouse is down and moved while on a particular DOM element.
-I then call (via a JavaScript Berkelium wrapper) a C++ function to notify that the drag has started. That function contains information about “what” is being dragged.
-When the mouse button is released outside of the browser window, I know what to drop and where to drop it within the host application.

To drag back into the web browser.
-The host application can call the web application javascript runtime via a javascript function call to notify that a payload is to be dropped at a given set of coordinates within the browser window.

Now this works fine at the level of JavaScript, and I am just wondering how I could make it work if the runtime of the web application is under the control of Vaadin.
For example, let’s say that I have a simple Vaadin app that is showing a list of elements in a table.
I would like to be able to “drag” an element from the table to the host application, and vice versa, I would like to be able to alter the table content by dropping content into it.

Given I know how to do this in pure JavaScript, I think I need to understand how the events flow form the client-side Vaadin JavaScript code all the way to the Server-side Vaadin code written in Java (or Scala). Am I on the right track?

Can I detect, in Vaadin, when an element’s drag has started? Likewise, how do I propagate a function call in the JavaScript client-side domain all the way back to a Vaadin event on the server side?


Guillaume Belrose.

Hi again,
I think I may have found the answer to my question by providing a subclass of VDragAndDropManager which calls a JavaScript function when the drag starts and is able to generate synthetic drop events which should propagate to the server side.