CODEWITHSUNDEEP
javajavafxdrag-and-dropshapesgridpane
Nick H
Nick H

Reputation: 227

Possible to Drag Shapes Within a GridPane with JavaFX

Am I correct in thinking it is not possible to drag Shapes within a GridPane? Here's a link to some code that allows the user to drag shapes around the screen: Drag and Drop Shapes

I want my shapes to have the same behavior as above, but I want them in a GridPane (eventually I'd like their movement to be locked to the X or Y axis to be moved on to adjacent shapes).

I added the below code to the "start" method. It creates circles using the same method as the example code but instead adds them to a grid. Surprisingly, this removed the ability for them to be dragged around.

GridPane grid = new GridPane();
grid.setLayoutX(300);
grid.setLayoutY(100);

int n = 3;
int m = 3;
for (int r = 0; r < n; r++) {
    for (int c = 0; c < m; c++) {

        Circle circle = createCircle(100, 50, 30, Color.BLACK);
        grid.add(circle, c, r);
    }
}
root.getChildren().add(grid);

If you want to test this just add the above code to the "start" method of the example code, just above these lines:

primaryStage.setScene(scene);
primaryStage.show();

My theory is the GridPane, because it locks the circles to certain positions, doesn't allow this dragging behavior.

Any input on how I can achieve movement of the circles along the X and Y axis when dragged?

Upvotes: 0

Views: 1898

Answers (1)

James_D
James_D

Reputation: 209358

In general, layout panes such as GridPane manage the placement of their content. Changing the layout coordinates will not affect nodes that are placed in these panes. You may find it better to use a plain Pane and manage the layout yourself for functionality such as this.

If you do want to use a GridPane, transformations (such as translations, etc) are applied after layout coordinates are computed, so you can use a translation (e.g. the one built-in with the translateX and translateY properties) to manage dragging in a layout pane.

So you can do:

circle.setOnMouseDragged((t) -> {
  double offsetX = t.getSceneX() - orgSceneX;
  double offsetY = t.getSceneY() - orgSceneY;

  // No idea why they are doing this. c is just circle
  Circle c = (Circle) (t.getSource());

  c.setTranslateX(c.getTranslateX() + offsetX);
  c.setTranslateY(c.getTranslateY() + offsetY);

  orgSceneX = t.getSceneX();
  orgSceneY = t.getSceneY();
});

Upvotes: 2

Related Questions