Drag and Drop allows data transfer between various components in your application. It allows transferring data in between your internal nodes or between two applications.
A drag-and-drop gesture happens as follows: The user click a mouse button on a gesture source, drags the mouse, and releases the mouse button on a gesture target. While dragging the data, the user gets visual feedback, which denotes locations that do not accept the data and, when over a target that accepts the data, gives a hint where to drop the data. T
he data is transferred using a dragboard, which has the same interface as a system clipboard but is only used for the drag-and-drop data transfer.Various types of data can be transferred such as text, images, URLs, files, bytes, and strings.
1. Receiving Data From other applications
Receiving data from other applications through drag and drop is very simple in JavaFX. The method setOnDragOver of node allows controlling what happens when something is dragged over the node. For example, as you can see in the top image, I have added a simple ImageView and implemented setOnDragOver to accept when files are dragged over it. Let's see the code.
In this code, I have added event handler for the image view for Drag Over case. The getDragboard method gives the Dragboard object which contains the files being transferred. The method hasFiles() is invoked to make sure that, the dragged content is a file. This is done to avoid when something other than files are dragged, like string or rich text content.
This line makes the component ready to accept the incoming data. As a result, we will get a hand with a plus symbol when dragged over image view.
The last thing we have to do is to accept the files when dropped. The method setOnDragDropped allows to achieve this. In our case we have to do as follows.
In this code, the list of incoming files are accessed using event.getDragboard().getFiles() method. This allows a list of files to be transferred. From the received files, we have to create an image and set it as the image for the imageview.
So, thta is as simple as a drag and drop operation can get. Now let's see how we can implement drag and drop for two internal nodes.
2. Drag and Drop between two internal components
In order to make a node ready to be dragged, we have to use setOnDragDetected method. This function will be called whenver a drag operation is done on the component. Here, source is a Text variable that contains some text.
When the source is dragged, The Dragboard class from javafx.scene.input.Dragboard is constructed by calling source.startDragAndDrop() method. Transfer modes define the type of transfer that happens between the gesture source and gesture target. Available transfer modes include COPY, MOVE, and LINK.
Inorder to send data from the source an instance of ClipboardContent is used. Since we are sending String data, putString method is used. After setting the content, it is then associated with Dragboard db.
Now source will allow dragging string data. ie, It act as a source.
Now just like we did in the image view, we need to setup the Text at the destination ready to accept the incoming string. This can be done by using setOnDragOver and setOnDragDropped.
Watch the complete tutorial about implementing Drag and Drop for your JavaFX Application.