JavaFX: How to drag imageview on a Pane - javafx

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.

Answer 1

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 ....

Answer 2

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>