Image Drag and Drop

Image Drag and Drop Code walk through

Drag and drop of images can be done by changing the layoutX and layoutY of the image at mouse dragging event. Originally Java provides the java.awt.dnd package to perform all the drag and drop operations. This however is an additional overhead to implement. There are no proper documentations which can help us do this operation, hence I felt a need to develop this application.

The concept is more or less same as the previous post of image pop up but this time we need to implement the mouse dragging event rather than the mouse clicking event. When mouse pressed we save the position X and Y into a temporary variable, this is done so that if we drag the image just within the same panel. On mouse released we can re-translate the image back to the original position it was before.

At mouse dragging we need to load the mouse pointer’s X and Y values into the image X and Y values. This will provide an illusion of dragging of image. Once the image is dragged over the separator to the other panel we know that at mouse release event we need to position the image being dragged into this panel. Hence as soon as the mouse is released the space calculations are quickly done to reposition the images in both the panels.

The Scale effect on release is obtained by the ScaleTranslation animation package.  When the image is initially clicked, the image node and the corresponding text node is stored in a temporary image node variable and the text node variable which is then used for dragging about a scene. The original node and the text nodes are deleted from the node array. This is because we can’t move original nodes about the scene anywhere. The nodes are bound to a group within a scene hence dragging would not be possible over scene if the original nodes are not stored in a temporary node variables. So they are deleted before, and then we drag these temporary nodes. At mouse release these nodes are added back into node array bound to the group within a scene and repositioned.

The space calculation function is called when we observe a movement of node between panels. This is a costly function, since on a node array containing many images would take time. However it necessary to do this since when we move the nodes between panels we need to reposition the remaining items in the node arrays so that the deleted node from one panel and the added node into the other panel are aligned appropriately.

There are 2 node arrays controlling each of the panel nodes. The image node and the text node are grouped into single node array in each panel display. Therefore if the position of the image node is ‘n’ then its corresponding text is ‘n+1’ on a node array.

Press on the Launch button to launch the application using webstart. 

For windows users pressing on the Launch button would start the Application in java web start.

However Linux users may face the problem of just jnlp the file being downloaded onto the system. However we can still get the application started by opening the terminal and setting the JDK home to 1.6 and then start the application by using

export JAVA_HOME=/usr/jdk1.6.0_18 and then set the PATH variable export export PATH=/usr/jdk1.6.0_18/bin:$PATH

After doing the above just execute:-   javaws DragnDrop.jnlp


Filed under Javafx Code Demos

4 responses to “Image Drag and Drop

  1. stephanie

    hey i’m really interested in the source of your project. The
    launch’ button to googlegroups doesnt appear to work for me. Is there anyway you can directly link me to the soursc? thanks!!

    • Hi,

      When you click on launch button you will be directed to google groups where you will find a lengthy link something like below

      Please click the following link to continue.


      you need to proceed and click on the link to obtain the jnlp file by which you can open using java webstart.

      I however check in my code into google projects under the following link feel free to look into it.


  2. Pingback: Image Drag and Drop

  3. This site has got lots of very useful things on it! Cheers for assisting me!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s