A perfect java blog

Draggable Node in Javafx 2.0

9 June,2011Narayan G. Maharjan

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 .

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

/**

*

* @author Narayan

*/

publicclassDraggableNodeextendsParent{

//ATTRIBUTES

//X AND Y postion of Node

doublex=0;

doubley=0;

//X AND Y position of mouse

doublemousex=0;

doublemousey=0;

//To make this function accessible for other Class

@Override

publicObservableList getChildren(){

returnsuper.getChildren();

}

publicDraggableNode(){

super();

//EventListener for MousePressed

onMousePressedProperty().set(newEventHandler&lt;MouseEvent&gt;(){

@Override

publicvoidhandle(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(newEventHandler&lt;MouseEvent&gt;(){

@Override

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

/**

*

* @author Narayan

*/

publicclassDragTestextendsApplication{

//Returs the Scene with Draggable Node

publicScene getUI(){

//Making a DraggableNode Object

DraggableNode panel=newDraggableNode();

//Defining style class for this node

panel.getStyleClass().add("rect");

Rectangle rectangle=newRectangle(200,200);

panel.getChildren().add(rectangle);

Scene scene=newScene(panel,640,480);

//using a css for styling controls

scene.getStylesheets().add("/javafxapplication/main.css");

returnscene;

}

@Override

publicvoidstart(Stage primaryStage)throwsException{

primaryStage.setScene(getUI());

primaryStage.setVisible(true);

}

publicstaticvoidmain(String[]args){

Application.launch(args);

}

}

Css “main.css”

1

2

3

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

I extended your example and put the panel on a pane and then set the pane to be the content of a scroll pane. However, I can’t find out how to make the scrollbars appear when I drag the rectangle out of the scene / scrollpane / pane.

ya it doesn’t work for the controls because the controls already takes first focus but there is hack to make these things working.
You can either use :
1. set setMouseTransparent(true); while your control is in dragging mode and again retain them to setMouseTransparent(false); when your dragging mode is off.
2. using some sort of blockinMouseProperty hack

Hiiii Narayan
how to create slider window in javafx like we are doing in modalbox when we click on modalbox it will come with sliding effect please send me the code for that slider window please give me reply back as soon as possible (farhan.quadri.cs@gmail.com) if possible then send me the code on my mail
Thank you so much

Hiiii Narayan
how to create slider window in javafx like we are doing in modalbox when we click on modalbox it will come with sliding effect please send me the code for that slider window please give me reply back as soon as possible (farhan.quadri.cs@gmail.com) if possible then send me the code on my mail
Thank you so much

Hi Farhan,
Sliding a window is just a the Transition of a Node I guess. Are you trying to make the use of sliding window like of ANDROID/IOS system? If so then you can make use of KeyFrames, KeyValue and Animation or may be you can try some Transitions of JavaFX.