Hello I’ve been working on javafx 2.0. JavaFX has very flexible and customizable controls. The JavaFX is specially for GUI purpose only . So Today I would like to show how to make a Draggable Node in Javafx 2.0.

First Let’s make one customNode class which extends from the Parent. Ok now let’s see the class .

/**
 *
 * @author Narayan
 */
public class DraggableNode extends Parent{

    //ATTRIBUTES
    //X AND Y postion of Node
    double x = 0;
    double y = 0;
    //X AND Y position of mouse
    double mousex=0;
    double mousey=0;

    //To make this function accessible for other Class
    @Override
    public ObservableList getChildren(){
        return super.getChildren();
    }

    public DraggableNode(){
        super();

        //EventListener for MousePressed
        onMousePressedProperty().set(new EventHandler<MouseEvent>(){

            @Override
            public void handle(MouseEvent event) {
               //record the current mouse X and Y position on Node
               mousex = event.getSceneX();
               mousey= event.getSceneY();
               //get the x and y position measure from Left-Top
               x = getLayoutX();
               y = getLayoutY();
            }

        });

        //Event Listener for MouseDragged
        onMouseDraggedProperty().set(new EventHandler<MouseEvent>(){

            @Override
            public void handle(MouseEvent event) {
                //Get the exact moved X and Y
                x += event.getSceneX()-mousex ;
                y += event.getSceneY()-mousey ;

                //set the positon of Node after calculation
                setLayoutX(x);
                setLayoutY(y);

                //again set current Mouse x AND y position
                mousex = event.getSceneX();
                mousey= event.getSceneY();

            }
        });
    }
}

I think the above code is quite simple for the java programmer. I actually used four variable for saving x and y position. The x and y position of Mouse and other x and y position of Node.

Now let’s see the use of Draggable Node .

/**
 *
 * @author Narayan
 */
public class DragTest extends Application{

    //Returs the Scene with Draggable Node
    public Scene getUI(){
        //Making a DraggableNode Object
        DraggableNode panel = new DraggableNode();
        //Defining style class for this node
        panel.getStyleClass().add("rect");

        Rectangle rectangle=new Rectangle(200,200);
        panel.getChildren().add(rectangle);

        Scene scene = new Scene(panel, 640, 480);
        //using a css for styling controls
        scene.getStylesheets().add("/javafxapplication/main.css");

        return scene;
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setScene(getUI());
        primaryStage.setVisible(true);
    }

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

}

Css “main.css”

.rect{
    -fx-translate-x:50;
}

Ok now that’s it. Just run the program and you will see the Rectangle with 50px right and it’s draggable too.
If you like to see the demo then see at here: Draggable Node

*But remember that if you use the controls inside children of customNode then the draggable won’t work at all. Because the focus is taken by the Controls

Please don’t feel hesitate on commenting . Have a good day and Thanks for viewing blog. :)