Drag And Drop Example and Pointers

Question

Hello,
Could you please point me to some code samples and URLs regarding the implementation of Drag and Drop in JavaFX?
(I want to implement a DnD between two TableViews)
Thx v much

Answer 1

I have done this and can give you some pointers. First see my bug report http://javafx-jira.kenai.com/browse/RT-14750 and you'll see they are working on Drag and Drop but here is how I did it.
First of all I attached event listeners to a custom row object provided with a row factory. The next thing I did was to create a DropTarget interface and a Draggable interface and a DragPane class. The drag mirror (DragPane) class is the node which will be dragged around the screen and is appended to the parent of your TableView's (assuming they share the same parent). The difficult part was detecting if I was over the drop target. I achieved that with the following code which is sitting inside the skin of a single control managing both the source and destination tables.
    public void onSourceRowDragged(MouseEvent event,CustomDraggableRow row)
        double sceneX = event.getSceneX();
        double sceneY = event.getSceneY();
        if (dragMirror == null) {
            dragMirror = new DragPane(row);
            // check for AnchorPane
            if (control.getParent().getClass().isAssignableFrom(AnchorPane.class)) {
                AnchorPane p = (AnchorPane)control.getParent();
                p.getChildren().add(dragMirror);
        javafx.scene.control.TablePosition p;
        // Locate drop target
        DropTarget nTarget = null;               
        Point2D tmpp = destTableContainer.sceneToLocal(sceneX,sceneY);
        Node overDestNode = destTableView.pickNode(tmpp.getX(),tmpp.getY());
        while(!(overDestNode == null || TableRowSkin.class.isAssignableFrom(overDestNode.getClass()))) {
            overDestNode = overDestNode.getParent();
            if (overDestNode == destTableView) {
                overDestNode = null;
        if (overDestNode != null) {
            TableRowSkin overSkin = (TableRowSkin)overDestNode;
            nTarget = (DropTarget)overSkin.getBehavior().getControl();
        if (dropTarget != null && dropTarget != nTarget) {
            dropTarget.onDraggableExited(event);
            dropTarget = null;
        if (nTarget != null && nTarget != dropTarget) {
            dropTarget = nTarget;
            dropTarget.onDraggableEntered(event);
    }This code really only works if the parent is a shared AnchorPane but it was the most difficult part of the project. As you can see the DragPane has a pointer back to the source, and when the mouse button is released if there is a dropTarget I notify the drop target that the object has been dropped. Lastly the mirror needs to be cleaned up. This technique is currently very slow, I suspect it is because the mouse events takes a long time to bubble up from the cells to the row object. I have plans of optimizing this by making the Row block mouse events from reaching the cells, but I haven't had time to optimize it yet. I also haven't followed the development teams official recommendation of creating an invisible cell over all of the other cells to capture the event because that solution, while possible, does not sound logical.