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