Image drag and drop in java

Java provides multiple ways to drag component from one location and drop it to another location. Some basic components such as JTable, JList, JColorChooser, JTextArea, JTextField, JTextPane, etc have drag behavior by default. In those kind of components what we have to do is simply enable drag feature by using setDragEnabled(boolean b) method.
But when it comes to images Java does not provide such a method to associate drag behavior with an image. So, how we add drag behavior to an image? Nothing to worry we have many alternatives (listed below).



  • Simply use MouseListeners (i.e. MouseMotionListener interface)

  • By using java.awt.dnd package and associated classes with it

  • Associate image with JLabel as Icon and drag label


Let’s start with really simple one.

Image Drag and Drop using Mouse Motion Listener


This is the simplest way to achieve drag and drop for an image. You may wonder; you just need around 50 lines of code to do this.

  1. You need to import few classes/packages first.


  2. import java.io.File;
    import java.io.IOException;
    import javax.imageio.ImageIO;
    import javax.swing.JComponent;
    import javax.swing.JFrame;


  3. Create a class by extending JComponent and implementing MouseMotionListener interface.



  4. public class ImageDrag extends JComponent implements MouseMotionListener{

    }


  5. Add two integer instance variables to keep track of the x and y locations of the image. You can initialize those two variables to some values which you need to draw your image when application starts (if not image draws in (0, 0) point or top-left corner of the panel). Add BufferedImage instance variable to load your image (you can use java.awt.Image type instead of java.awt.image.BufferedImage).


  6. Add main method and create JFrame to draw image. Set basic properties of JFrame such as closeOperation, size, LookandFeel.


  7. public static void main(String args[]){
    JFrame frame = new JFrame("Image DnD");
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setSize(450, 450);
    }



  8. Create an instance of class and add it to the JFrame. Set visibility of JFrame to true.


  9. public static void main(String args[]){
    JFrame frame = new JFrame("Image DnD");
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setSize(450, 450);
    ImageDrag imageDragComponent = new ImageDrag();
    frame.getContentPane().add(imageDragComponent);
    frame.setVisible(true);
    }

  10. Create a constructor for the class and load image which you want to drag and drop. Setup the MouseMotionListener by using method addMouseMotionListener().


  11. public ImageDrag(){
    initComponents();
    addMouseMotionListener(this);
    }

    public void initComponents(){
    try{
    image = ImageIO.read(new File("src/dndblog1/images/Mickey mouse.gif"));
    }
    catch(IOException ioe){ioe.printStackTrace();}
    }



    After loading image we can draw it on the JFrame. For that we can override the paint method of component.


    public void paint(Graphics g){
    g.drawImage(image, x, y, this);
    }


    Here image is BufferedImage instance variable and x, y are integer instance variables which I have created in step3. So this method draws a BufferedImage on the location specified by x and y.

  12. There are two methods come up with MouseMotionListener interface you have to add those two methods.
    mouseMoved(MouseEvent me) method is for handle mouse movement without clicking on the screen. For our purpose there’s no any need of this method so leave it as it is.

    public void mouseMovedMouseEvent me){
    }


    mouseDragged(MouseEvent me) method invokes when we dragged some component from one location to another. Now there’s a trick, think for a while what are the things that change when we drag an image from one location to another?
    Image is same. It just changes it’s location (that means x and y coordinates) what we have to do is track this x and y coordinates. For that MouseEvent class provides two methods. getX() method returns the dropped point’s x coordinate and getY() method returns the dropped point’s y coordinate (note that I’m just talking about dragging and dropping so this getX() and getY() methods have different meanings according to the context).
    Now our task is almost over we have to assign those getX() method’s return value to x position of image and getY() method’s return value to y position and reapint the image.


  13. public void mouseDragged(MouseEvent me){
    x = me.getX();
    y = me.getY();
    repaint();
    }


Just compile and run your code; you can drag and drop image. It is quite simple, isn’t it?
Comments are really valuable..:)
You can download full source code here