Moving undecorated stage Javafx with JXML and Scene Builder

Question

I'm trying to capture X and Y coordinates of a undecorated pane in Javafx. The project is created using javafx, JXML and Scene Builder. Now there are other links on SO which hints to the answer, but I'm quite not able to implement it. Either I get build error exception or get NaN as coordinates. What are minimum modifications required to implement movable panes functionality with following code?

Here is the code for MainApp.java (skipping imports as they are handled by NetBeans very well)

public class MainApp extends Application {

@Override
public void start(Stage stage) throws Exception {
    GridPane MainPane = FXMLLoader.load(getClass().getResource("/fxml/Scene.fxml"));

    Scene scene = new Scene(MainPane, Color.TRANSPARENT);
    scene.getStylesheets().add("/styles/Styles.css");
    stage.initStyle(StageStyle.TRANSPARENT);

    stage.setScene(scene);
    stage.show();

}

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

}

FXMLController.java

public class FXMLController extends GridPane {

public void rootNodeClick(MouseEvent mouseEvent) {
System.out.println("click");
}

public void rootNodeDrag(MouseEvent mouseEvent) {
System.out.println("drag");
}
}

FXML

 <?xml version="1.0" encoding="UTF-8"?>


 <GridPane fx:id="MainPane" alignment="CENTER" focusTraversable="true" maxHeight="550.0" maxWidth="600.0" minHeight="550.0" minWidth="600.0" nodeOrientation="LEFT_TO_RIGHT" onMouseClicked="#rootNodeClick" onMouseDragged="#rootNodeDrag" prefHeight="550.0" prefWidth="600.0" style="-fx-background-color: #ecf0f1; -fx-background-radius: 3;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="FXMLController">
 <columnConstraints>
 <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
 <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
 </columnConstraints>
 <rowConstraints>
 <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
 <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
 <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
 </rowConstraints>
 <effect>
 <InnerShadow blurType="GAUSSIAN" color="#ffffff44" height="10.0" radius="4.5" width="10.0" />
 </effect>
 </GridPane>

Answer 1

Something like this should do the trick. When the mouse is pressed, we capture X and Y and set the difference when the drag is over.

    final Delta dragDelta = new Delta();
    MainPane.setOnMousePressed(new EventHandler<MouseEvent>() {
        @Override
        public void handle(MouseEvent me) {
            if (me.getButton() == MouseButton.PRIMARY) {
                dragDelta.x = me.getSceneX();
                dragDelta.y = me.getSceneY();
            }
        }
    });

    MainPane.setOnMouseDragged(new EventHandler<MouseEvent>() {
        @Override
        public void handle(MouseEvent me) {
            if (me.getButton() == MouseButton.PRIMARY) {
                scene.getWindow().setX(me.getScreenX() - dragDelta.x);
                scene.setY(me.getScreenY() - dragDelta.y);
            }
        }
    });

Here is Delta

public class Delta {
    public double x;
    public double y;
}

The original answer was found on Stackoverflow, I used it long time ago, but I can't find it again, so sorry for the original answer