Move an ImageView with a drag and drop event - javafx

Question

I am trying to create a JavaFX chess board and I encounter a problem with the drag and drop event on a piece.
chess board image
My chess board is composed of Case class extending Label and these Cases can have a Piece as a graphic (this class extends ImageView).
I am trying to make the pieces movable with a drag and drop event (setOnMouseDragged).
I've tried this code without success:
(we have c, a Case and p, a Piece)
c.setOnMousePressed(mouseEvent -> {
p.mouseAnchorX = mouseEvent.getX();
p.mouseAnchorY = mouseEvent.getY();
});
c.setOnMouseDragged(mouseEvent ->{
p.setLayoutX(mouseEvent.getSceneX() - p.mouseAnchorX);
p.setLayoutY(mouseEvent.getSceneY() - p.mouseAnchorY);
/*
p.setX(mouseEvent.getSceneX() - p.mouseAnchorX);
p.setY(mouseEvent.getSceneY() - p.mouseAnchorY);
*/
/*
p.setTranslateX(mouseEvent.getSceneX()/30 - 25.5);
p.setTranslateY(mouseEvent.getSceneY()/30 - 17);
*/
});
Both [setX / setY] and [setLayoutX / setLayoutY] are not moving the piece.
The closest I got was with the setTranslateX and setTranslateY methods : the pieces are moving but not appropriately.
Ideally, I'd like to use the setLayoutX and setLayoutY methods but I don't get why they don't work in my case.

Answer 1

We create a method with the name makeDraggable(), which has a Node as a parameter. In your case, you can use a for-loop to loop through each piece.
In the method, you create a Group which contains the Node. Then you add EventFilters for dragging and pressing. To remember the initial mouse cursor coordinates use DragContext. To disable MouseEvents for the children we need to add the following lines.
// adds EventFilter
wrapGroup.addEventFilter(
// for any MouseEvent
MouseEvent.ANY,
new EventHandler<MouseEvent>() {
public void handle(final MouseEvent mouseEvent) {
if (dragModeActiveProperty.get()) {
// disable mouse events for all children
mouseEvent.consume();
}
}
});
Then you're ready to add the mouse-pressed EventFilter.
// adds EventFilter
wrapGroup.addEventFilter(
// for mouse pressed
MouseEvent.MOUSE_PRESSED,
new EventHandler<MouseEvent>() {
public void handle(final MouseEvent mouseEvent) {
if (dragModeActiveProperty.get()) {
// remember initial mouse cursor coordinates
// and node position
dragContext.mouseAnchorX = mouseEvent.getX();
dragContext.mouseAnchorY = mouseEvent.getY();
dragContext.initialTranslateX =
node.getTranslateX();
dragContext.initialTranslateY =
node.getTranslateY();
}
}
});
Afterwards, we only need to add the drag EventFilter.
// adds EventFilter
wrapGroup.addEventFilter(
// for mouse dragged
MouseEvent.MOUSE_DRAGGED,
new EventHandler<MouseEvent>() {
public void handle(final MouseEvent mouseEvent) {
if (dragModeActiveProperty.get()) {
// shift node from its initial position by delta
// calculated from mouse cursor movement
node.setTranslateX(
dragContext.initialTranslateX
+ mouseEvent.getX()
- dragContext.mouseAnchorX);
node.setTranslateY(
dragContext.initialTranslateY
+ mouseEvent.getY()
- dragContext.mouseAnchorY);
}
}
});
According to Oracles article about Working with Event Filters the full method can look like this:
private Node makeDraggable(final Node node) {
final DragContext dragContext = new DragContext();
final Group wrapGroup = new Group(node);
wrapGroup.addEventFilter(
MouseEvent.ANY,
new EventHandler<MouseEvent>() {
public void handle(final MouseEvent mouseEvent) {
if (dragModeActiveProperty.get()) {
// disable mouse events for all children
mouseEvent.consume();
}
}
});
wrapGroup.addEventFilter(
MouseEvent.MOUSE_PRESSED,
new EventHandler<MouseEvent>() {
public void handle(final MouseEvent mouseEvent) {
if (dragModeActiveProperty.get()) {
// remember initial mouse cursor coordinates
// and node position
dragContext.mouseAnchorX = mouseEvent.getX();
dragContext.mouseAnchorY = mouseEvent.getY();
dragContext.initialTranslateX =
node.getTranslateX();
dragContext.initialTranslateY =
node.getTranslateY();
}
}
});
wrapGroup.addEventFilter(
MouseEvent.MOUSE_DRAGGED,
new EventHandler<MouseEvent>() {
public void handle(final MouseEvent mouseEvent) {
if (dragModeActiveProperty.get()) {
// shift node from its initial position by delta
// calculated from mouse cursor movement
node.setTranslateX(
dragContext.initialTranslateX
+ mouseEvent.getX()
- dragContext.mouseAnchorX);
node.setTranslateY(
dragContext.initialTranslateY
+ mouseEvent.getY()
- dragContext.mouseAnchorY);
}
}
});
return wrapGroup;
}
Similar to your question: Have a look at this stack overflow discussion.