Posts Tagged draggable

Source Code : Draggable ListCell as FriendList Demo

Hello I’m back,

Ah…Today I finally got some time to think of uploading the source code of Draggable ListCell as FriendList Demo.


Here we go:

Source Code in GIT : javafx-autocomplete-field


Friends List Demo

Click on above picture to see live example in browser


The full description about this blog is posted here: JavaFX Drag and Drop Cell in ListView

Hope you guys like it!

Thanks and have a good day folks :)

Tags: , , , , , ,

Draggable Node in Javafx 2.0

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 . Read the rest of this entry »

Tags: , , , ,

Dragging Image in Javafx

Hello today I would like to write a blog of how can we make the image draggable in a Stage.
Firstly you need to know more about MouseEvent, ImageView in JavaFx API.

Here we’ll be working around the dragX , dragY properties of MouseEvent class and x, y properties of ImageView. I’ve seen so many blogs but none of the blog had given me the smooth dragging feature in javafx. So here I’m going to start my codes for smooth dragging ability to ImageView .

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;

 * @author NARAYAN
 var myX:Number = 0;
 var myY:Number = 0;
 var tempX:Number = 0;
 var tempY:Number = 0;

def img:ImageView = bind ImageView {
                    x:bind tempX+myX
                    y:bind tempY+myY
                    image: Image {
                            url: "{__DIR__}everest.jpg"

                    onMouseReleased: function (e: MouseEvent): Void {
                            tempX = img.x;
                            tempY = img.y;
                            myX = 0;
                            myY = 0;

                    onMouseDragged: function (e: MouseEvent): Void {
                            myX = e.dragX;
                            myY = e.dragY;

Stage {
    title: "ImageView Smoothly Dragging"
    scene: Scene {
        width: 450
        height: 400
        content: [


After using this code you can see the mouse dragging is being binded with the ImageView ‘x’ and ‘y’ position. Futher more for saving the temporary x and y position of ImageView I’ve used mouseReleased() event.

Thanks for viewing blog.

Tags: , , , , , ,