JavaFX: How to drag imageview on a Pane

Question

Can somebody give a simple example about how to set up the EventHandler for dragging imageviews on a Pane(JavaFX). For dragging I mean press the mouse on the image, drag and image should follow, then release the mouse and the imageview will stop at that location.

Possible duplicate of [correct way to move a node by dragging in javafx 2?](http://stackoverflow.com/questions/10682107/correct-way-to-move-a-node-by-dragging-in-javafx-2). You might also wish to look at the [Oracle JavaFX sample Paper Doll application](https://docs.oracle.com/javase/8/javafx/events-tutorial/paper-doll.htm) for something more sophisticated (and complex). — jewelsea, Jul 22 '16 at 20:22

score 2 · Answer 1 · edited Jul 21 '16 at 20:10

2

read docs first Drag and drop in javafx or you can do it yourself by getMouseX and getMouseY points and change the coordinates of the imageView in AnchorPane ....

edited Jul 21 '16 at 20:10

fabian

80,457
12
86
114

answered Jul 21 '16 at 19:49

RayanFar

539
11
28

FrankT · Answer 2 · 2016-07-22T08:43:44.063

I wanted to try out the proposed solution with the drag and drop. I find it to be not optimal.

By doing it with drag and drop you trigger some mechanisms that are unnecessary:

You can drag it outside of your application
Cursor changes ...
I also had problems that the calulation of the position delta seems to be speed dependent

Nether the less, in case someone is interested this is my code:

Main.java

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        FXMLLoader loader = new FXMLLoader(getClass().getResource("sample.fxml"));

        Controller controller = new Controller();
        loader.setController(controller);

        Parent root = (Parent)loader.load();
        controller.InitUi();

        primaryStage.setTitle("Hello World");
        primaryStage.setScene(new Scene(root, 300, 275));
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

Controller.java

package sample;

import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.scene.input.*;
import javafx.scene.layout.AnchorPane;
import javafx.scene.shape.Rectangle;

public class Controller
{
    @FXML
    private Rectangle draggable;

    private Double lastX = null;
    private Double lastY = null;

    public void InitUi()
    {
        if (this.draggable != null)
        {
            this.draggable.setOnDragOver(new EventHandler<DragEvent>()
            {
                @Override
                public void handle(DragEvent dragEvent)
                {
                    HandleMouseMovement(dragEvent.getSceneX(), dragEvent.getSceneY());
                }
            });

            this.draggable.setOnDragDetected(new EventHandler<MouseEvent>() {
                public void handle(MouseEvent event) {
                    Dragboard db = draggable.startDragAndDrop(TransferMode.ANY);
                    ClipboardContent content = new ClipboardContent();
                    content.putString("Does not matter");
                    db.setContent(content);
                    event.consume();

                    lastX = event.getSceneX();
                    lastY = event.getSceneY();
                }
            });
        }
    }

    private synchronized void HandleMouseMovement(double sceneX, double sceneY)
    {
        double deltaX = sceneX - lastX;
        double deltaY = sceneY - lastY;

        lastX = sceneX;
        lastY = sceneY;

        double currentXAnchor =AnchorPane.getLeftAnchor(this.draggable);
        double currentYAnchor =AnchorPane.getTopAnchor(this.draggable);

        AnchorPane.setLeftAnchor( this.draggable,  currentXAnchor + deltaX*1.5);
        AnchorPane.setTopAnchor(this.draggable, currentYAnchor + deltaY*1.5);
    }
}

sample.fxml

<?import javafx.scene.layout.GridPane?>

<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.shape.Rectangle?>
<GridPane xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10" prefHeight="500" prefWidth="500">
    <AnchorPane>
        <Rectangle fx:id="draggable" width="40" height="50" AnchorPane.topAnchor="20" AnchorPane.leftAnchor="20"/>
    </AnchorPane>
</GridPane>

Ok, it seems like the speed problems had to do with multiple move events beeing handeld at the same time. Making the `HandleMouseMovement` `synchroized` fixed that problem. (for the most part) — FrankT, Jul 22 '16 at 08:45

JavaFX: How to drag imageview on a Pane

2 Answers2