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 {
                            backgroundLoading:true
                            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: [
            img

        ]
    }
}

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 {

backgroundLoading:true

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: [

img

]

}

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

2 thoughts on “Dragging Image in Javafx”

Debt Consolidation October 6, 2010 at 2:07 pm

Sorry for my bad english. Thank you so much for your good post. Your post helped me in my college assignment, If you can provide me more details please email me.
anonymous August 13, 2013 at 1:48 am

taken from here in 2008 ?
https://blogs.oracle.com/vaibhav/entry/image_drag_with_mouse_in

Dragging Image in Javafx

Share this:

2 thoughts on “Dragging Image in Javafx”

Leave a Reply Cancel reply