Drag and Drop an image

Question

Can anyone recommend me a good tutorial on how to drag and drop or even resize an image in a panel ?

Answer 1

I'm back.
I wrote a 2 classes appli that allow to move and resize images displayed in a panel.
The first class is the most interesting one. It describes an object which extends Rectangle and manage an Image. This class names TransformableImage extends Rectangle because we need to know the bounds of the rectangle, where the image is contained in, to allow mouse interactions through the panel.
The behavior we want is to change the kind of cursors according to the position of the mouse on the panel :
if the mouse is out of any images the cursor is the default one. If the cursor is on an image, it can be a move cursor in the center of the image or one of the resize cursors if the mouse is on the border of the image.
Here is the class :
import java.awt.*;
import javax.swing.*;
import java.awt.image.*;
public final class TransformableImage extends Rectangle {
     public static final int MOVE = 0;
     public static final int RESIZE_TOP = 10;
     public static final int RESIZE_BOTTOM = 20;
     public static final int RESIZE_RIGHT = 1;
     public static final int RESIZE_LEFT = 2;
     public static final int RESIZE_TOP_RIGHT_CORNER = 11;
     public static final int RESIZE_TOP_LEFT_CORNER = 12;
     public static final int RESIZE_BOTTOM_RIGHT_CORNER = 21;
     public static final int RESIZE_BOTTOM_LEFT_CORNER = 22;
     public static final int BORDER_THICKNESS = 5;
     public static final int MIN_THICKNESS = BORDER_THICKNESS*2;
     private static final Color borderColor = Color.black;
     private Image image;
     * Create an TransformableImage from the image file filename.
     * The TransformableImage bounds (inherited from the class Rectangle) are setted to the corresponding values.
     public TransformableImage(String filename) {
          ImageIcon ic = new ImageIcon(filename);
          image = ic.getImage();
          setBounds(0,0,ic.getIconWidth(), ic.getIconHeight());
     * Draw the image rescaled to fit the bounds.
     * A black rectangle is drawn around the image.
     public final void draw(Graphics2D g, ImageObserver observer) {
          Color oldColor = g.getColor();
          g.setColor(borderColor);
          g.drawImage(image, x, y, width, height, observer);
          g.draw(this);
          g.setColor(oldColor);
     * Return an int corresponding to the transformation available according to the mouse location on the image.
     * If the point p is in the border, with a thickness of BORDER_THICKNESS, around the image, the corresponding
     * transformation is returned (RESIZE_TOP, ..., RESIZE_BOTTOM_LEFT_CORNER).
     * If the point p is located in the center of the image (i.e. out of the border), the MOVE transformation is returned.
     * We allways suppose that p is contained in the image bounds.
     public final int getTransformation(Point p) {
          int px = p.x;
          int py = p.y;
          int transformation = 0;
          if (py<(y+BORDER_THICKNESS)) {
               transformation += RESIZE_TOP;
          else
          if (py>(y+height-BORDER_THICKNESS-1)) {
               transformation += RESIZE_BOTTOM;
          if (px<(x+BORDER_THICKNESS)) {
               transformation += RESIZE_LEFT;
          else
          if (px>(x+width-BORDER_THICKNESS-1)) {
               transformation += RESIZE_RIGHT;
          return(transformation);
     * Move the left side of the image, verifying that the width is > to the MIN_THICKNESS.
     public final void moveX1(int px) {
          int x1 = x+width;
          if (px>x1-MIN_THICKNESS) {
               x = x1-MIN_THICKNESS;
               width = MIN_THICKNESS;
          else {
               width += (x-px);
               x = px;               
     * Move the right side of the image, verifying that the width is > to the MIN_THICKNESS.
     public final void moveX2(int px) {
          width = px-x;
          if (width<MIN_THICKNESS) {
               width = MIN_THICKNESS;
     * Move the top side of the image, verifying that the height is > to the MIN_THICKNESS.
     public final void moveY1(int py) {
          int y1 = y+height;
          if (py>y1-MIN_THICKNESS) {
               y = y1-MIN_THICKNESS;
               height = MIN_THICKNESS;
          else {
               height += (y-py);
               y = py;               
     * Move the bottom side of the image, verifying that the height is > to the MIN_THICKNESS.
     public final void moveY2(int py) {
          height = py-y;
          if (height<MIN_THICKNESS) {
               height = MIN_THICKNESS;
     * Apply a given transformation with the given Point to the image.
     * The shift values dx and dy are needed for move tho locate the image at the same relative position from the cursor (p).
     public final void transform(Point p, int transformationType, int dx, int dy) {
          int px = p.x;
          int py = p.y;
          switch (transformationType) {
               case MOVE : x = px-dx; y = py-dy;
                    break;
               case RESIZE_TOP : moveY1(py);
                    break;
               case RESIZE_BOTTOM : moveY2(py);
                    break;
               case RESIZE_LEFT : moveX1(px);
                    break;
               case RESIZE_RIGHT : moveX2(px);
                    break;
               case RESIZE_TOP_LEFT_CORNER : moveX1(px);moveY1(py);
                    break;
               case RESIZE_TOP_RIGHT_CORNER : moveX2(px);moveY1(py);
                    break;
               case RESIZE_BOTTOM_LEFT_CORNER : moveX1(px);moveY2(py);
                    break;
               case RESIZE_BOTTOM_RIGHT_CORNER : moveX2(px);moveY2(py);
                    break;
               default :
}And now, we need to create the panel where we are going to draw the images and interact with them with the mouse. In fact we need a paintComponent method used to draw the images and a Mouse(Motion)Listener to manage the required mouse events.
We also have to create a method to set the convenient cursor according to tha position of the mouse over the images.
Here is the class :
import java.util.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.*;
public class ImagePanel extends JComponent {
     private static final Cursor DEFAULT_CURSOR = new Cursor(Cursor.DEFAULT_CURSOR);
     private static final Cursor MOVE_CURSOR = new Cursor(Cursor.MOVE_CURSOR);
     private static final Cursor VERTICAL_RESIZE_CURSOR = new Cursor(Cursor.N_RESIZE_CURSOR);
     private static final Cursor HORIZONTAL_RESIZE_CURSOR = new Cursor(Cursor.W_RESIZE_CURSOR);
     private static final Cursor NW_SE_RESIZE_CURSOR = new Cursor(Cursor.NW_RESIZE_CURSOR);
     private static final Cursor NE_SW_RESIZE_CURSOR = new Cursor(Cursor.NE_RESIZE_CURSOR);
     public Vector images;
     * Create an ImagePanel with two images in.
     * A MouseHandler instance is added as mouse listener and mouse motion listener.
     public ImagePanel() {
          images = new Vector();
          images.add(new TransformableImage("image1.gif"));
          images.add(new TransformableImage("image2.gif"));
          setPreferredSize(new Dimension(600,600));
          MouseHandler mh = new MouseHandler();
          addMouseListener(mh);
          addMouseMotionListener(mh);
     * Simply paint all the images contained in the Vector images, calling their method draw(Graphics2D, ImageObserver).
     public void paintComponent(Graphics g) {
          Graphics2D g2D = (Graphics2D)g;
          for (int i = images.size()-1; i>=0; i--) {     
               ((TransformableImage)images.get(i)).draw(g2D, this);
     * Inner class defining the behavior of the mouse.
     final class MouseHandler extends MouseInputAdapter {
          private TransformableImage draggedImage;
          private int transformation;
          private int dx, dy;
          public void mouseMoved(MouseEvent e) {
               Point p = e.getPoint();
               TransformableImage image = getImageAt(p);
               if (image != null) {
                    transformation = image.getTransformation(p);
                    setConvenientCursor(transformation);
               else {
                    setConvenientCursor(-1);
          public void mousePressed(MouseEvent e) {
               Point p = e.getPoint();
               draggedImage = getImageAt(p);
               if (draggedImage!=null) {
                    dx = p.x-draggedImage.x;
                    dy = p.y-draggedImage.y;
          public void mouseDragged(MouseEvent e) {
               if (draggedImage==null) {
                    return;
               Point p = e.getPoint();
               repaint(draggedImage.x,draggedImage.y,draggedImage.width+1,draggedImage.height+1);
               draggedImage.transform(p, transformation,dx,dy);
               repaint(draggedImage.x,draggedImage.y,draggedImage.width+1,draggedImage.height+1);
          public void mouseReleased(MouseEvent e) {
               Point p = e.getPoint();
               draggedImage = null;
     * Utility method used to get the image located at a Point p.
     * Returns null if there is no image at this point.
     private final TransformableImage getImageAt(Point p) {
          TransformableImage image = null;
          for (int i = 0, n = images.size(); i<n; i++) {     
               image = (TransformableImage)images.get(i);
               if (image.contains(p)) {
                    return(image);
          return(null);
     * Sets the convenient cursor according the the transformation (i.e. the position of the mouse over the image).
     private final void setConvenientCursor(int transfo) {
          Cursor currentCursor = getCursor();
          Cursor newCursor = null;
          switch (transfo) {
               case TransformableImage.MOVE : newCursor = MOVE_CURSOR;
                    break;
               case TransformableImage.RESIZE_TOP : newCursor = VERTICAL_RESIZE_CURSOR;
                    break;
               case TransformableImage.RESIZE_BOTTOM : newCursor = VERTICAL_RESIZE_CURSOR;
                    break;
               case TransformableImage.RESIZE_LEFT : newCursor = HORIZONTAL_RESIZE_CURSOR;
                    break;
               case TransformableImage.RESIZE_RIGHT : newCursor = HORIZONTAL_RESIZE_CURSOR;
                    break;
               case TransformableImage.RESIZE_TOP_LEFT_CORNER : newCursor = NW_SE_RESIZE_CURSOR;
                    break;
               case TransformableImage.RESIZE_TOP_RIGHT_CORNER : newCursor = NE_SW_RESIZE_CURSOR;
                    break;
               case TransformableImage.RESIZE_BOTTOM_LEFT_CORNER : newCursor = NE_SW_RESIZE_CURSOR;
                    break;
               case TransformableImage.RESIZE_BOTTOM_RIGHT_CORNER : newCursor = NW_SE_RESIZE_CURSOR;
                    break;
               default : newCursor = DEFAULT_CURSOR;
          if (newCursor != null && currentCursor != newCursor) {
               setCursor(newCursor);
     public static void main(String[] args) {
          JFrame frame = new JFrame("Test transformable images");
          frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          frame.getContentPane().add(new ImagePanel(), BorderLayout.CENTER);
          frame.pack();
          frame.setVisible(true);
}If you want more information tell me.
------- Here is the unformatted version -----
import java.awt.*;
import javax.swing.*;
import java.awt.image.*;
public final class TransformableImage extends Rectangle {
     public static final int MOVE = 0;
     public static final int RESIZE_TOP = 10;
     public static final int RESIZE_BOTTOM = 20;
     public static final int RESIZE_RIGHT = 1;
     public static final int RESIZE_LEFT = 2;
     public static final int RESIZE_TOP_RIGHT_CORNER = 11;
     public static final int RESIZE_TOP_LEFT_CORNER = 12;
     public static final int RESIZE_BOTTOM_RIGHT_CORNER = 21;
     public static final int RESIZE_BOTTOM_LEFT_CORNER = 22;
     public static final int BORDER_THICKNESS = 5;
     public static final int MIN_THICKNESS = BORDER_THICKNESS*2;
     private static final Color borderColor = Color.black;
     private Image image;
     * Create an TransformableImage from the image file filename.
     * The TransformableImage bounds (inherited from the class Rectangle) are setted to the corresponding values.
     public TransformableImage(String filename) {
          ImageIcon ic = new ImageIcon(filename);
          image = ic.getImage();
          setBounds(0,0,ic.getIconWidth(), ic.getIconHeight());
     * Draw the image rescaled to fit the bounds.
     * A black rectangle is drawn around the image.
     public final void draw(Graphics2D g, ImageObserver observer) {
          Color oldColor = g.getColor();
          g.setColor(borderColor);
          g.drawImage(image, x, y, width, height, observer);
          g.draw(this);
          g.setColor(oldColor);
     * Return an int corresponding to the transformation available according to the mouse location on the image.
     * If the point p is in the border, with a thickness of BORDER_THICKNESS, around the image, the corresponding
     * transformation is returned (RESIZE_TOP, ..., RESIZE_BOTTOM_LEFT_CORNER).
     * If the point p is located in the center of the image (i.e. out of the border), the MOVE transformation is returned.
     * We allways suppose that p is contained in the image bounds.
     public final int getTransformation(Point p) {
          int px = p.x;
          int py = p.y;
          int transformation = 0;
          if (py<(y+BORDER_THICKNESS)) {
               transformation += RESIZE_TOP;
          else
          if (py>(y+height-BORDER_THICKNESS-1)) {
               transformation += RESIZE_BOTTOM;
          if (px<(x+BORDER_THICKNESS)) {
               transformation += RESIZE_LEFT;
          else
          if (px>(x+width-BORDER_THICKNESS-1)) {
               transformation += RESIZE_RIGHT;
          return(transformation);
     * Move the left side of the image, verifying that the width is > to the MIN_THICKNESS.
     public final void moveX1(int px) {
          int x1 = x+width;
          if (px>x1-MIN_THICKNESS) {
               x = x1-MIN_THICKNESS;
               width = MIN_THICKNESS;
          else {
               width += (x-px);
               x = px;               
     * Move the right side of the image, verifying that the width is > to the MIN_THICKNESS.
     public final void moveX2(int px) {
          width = px-x;
          if (width<MIN_THICKNESS) {
               width = MIN_THICKNESS;
     * Move the top side of the image, verifying that the height is > to the MIN_THICKNESS.
     public final void moveY1(int py) {
          int y1 = y+height;
          if (py>y1-MIN_THICKNESS) {
               y = y1-MIN_THICKNESS;
               height = MIN_THICKNESS;
          else {
               height += (y-py);
               y = py;               
     * Move the bottom side of the image, verifying that the height is > to the MIN_THICKNESS.
     public final void moveY2(int py) {
          height = py-y;
          if (height<MIN_THICKNESS) {
               height = MIN_THICKNESS;
     * Apply a given transformation with the given Point to the image.
     * The shift values dx and dy are needed for move tho locate the image at the same relative position from the cursor (p).
     public final void transform(Point p, int transformationType, int dx, int dy) {
          int px = p.x;
          int py = p.y;
          switch (transformationType) {
               case MOVE : x = px-dx; y = py-dy;
                    break;
               case RESIZE_TOP : moveY1(py);
                    break;
               case RESIZE_BOTTOM : moveY2(py);
                    break;
               case RESIZE_LEFT : moveX1(px);
                    break;
               case RESIZE_RIGHT : moveX2(px);
                    break;
               case RESIZE_TOP_LEFT_CORNER : moveX1(px);moveY1(py);
                    break;
               case RESIZE_TOP_RIGHT_CORNER : moveX2(px);moveY1(py);
                    break;
               case RESIZE_BOTTOM_LEFT_CORNER : moveX1(px);moveY2(py);
                    break;
               case RESIZE_BOTTOM_RIGHT_CORNER : moveX2(px);moveY2(py);
                    break;
               default :
import java.util.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.*;
public class ImagePanel extends JComponent {
     private static final Cursor DEFAULT_CURSOR = new Cursor(Cursor.DEFAULT_CURSOR);
     private static final Cursor MOVE_CURSOR = new Cursor(Cursor.MOVE_CURSOR);
     private static final Cursor VERTICAL_RESIZE_CURSOR = new Cursor(Cursor.N_RESIZE_CURSOR);
     private static final Cursor HORIZONTAL_RESIZE_CURSOR = new Cursor(Cursor.W_RESIZE_CURSOR);
     private static final Cursor NW_SE_RESIZE_CURSOR = new Cursor(Cursor.NW_RESIZE_CURSOR);
     private static final Cursor NE_SW_RESIZE_CURSOR = new Cursor(Cursor.NE_RESIZE_CURSOR);
     public Vector images;
     * Create an ImagePanel with two images in.
     * A MouseHandler instance is added as mouse listener and mouse motion listener.
     public ImagePanel() {
          images = new Vector();
          images.add(new TransformableImage("image1.gif"));
          images.add(new TransformableImage("image2.gif"));
          setPreferredSize(new Dimension(600,600));
          MouseHandler mh = new MouseHandler();
          addMouseListener(mh);
          addMouseMotionListener(mh);
     * Simply paint all the images contained in the Vector images, calling their method draw(Graphics2D, ImageObserver).
     public void paintComponent(Graphics g) {
          Graphics2D g2D = (Graphics2D)g;
          for (int i = images.size()-1; i>=0; i--) {     
               ((TransformableImage)images.get(i)).draw(g2D, this);
     * Inner class defining the behavior of the mouse.
     final class MouseHandler extends MouseInputAdapter {
          private TransformableImage draggedImage;
          private int transformation;
          private int dx, dy;
          public void mouseMoved(MouseEvent e) {
               Point p = e.getPoint();
               TransformableImage image = getImageAt(p);
               if (image != null) {
                    transformation = image.getTransformation(p);
                    setConvenientCursor(transformation);
               else {
                    setConvenientCursor(-1);
          public void mousePressed(MouseEvent e) {
               Point p = e.getPoint();
               draggedImage = getImageAt(p);
               if (draggedImage!=null) {
                    dx = p.x-draggedImage.x;
                    dy = p.y-draggedImage.y;
          public void mouseDragged(MouseEvent e) {
               if (draggedImage==null) {
                    return;
               Point p = e.getPoint();
               repaint(draggedImage.x,draggedImage.y,draggedImage.width+1,draggedImage.height+1);
               draggedImage.transform(p, transformation,dx,dy);
               repaint(draggedImage.x,draggedImage.y,draggedImage.width+1,draggedImage.height+1);
          public void mouseReleased(MouseEvent e) {
               Point p = e.getPoint();
               draggedImage = null;
     * Utility method used to get the image located at a Point p.
     * Returns null if there is no image at this point.
     private final TransformableImage getImageAt(Point p) {
          TransformableImage image = null;
          for (int i = 0, n = images.size(); i<n; i++) {     
               image = (TransformableImage)images.get(i);
               if (image.contains(p)) {
                    return(image);
          return(null);
     * Sets the convenient cursor according the the transformation (i.e. the position of the mouse over the image).
     private final void setConvenientCursor(int transfo) {
          Cursor currentCursor = getCursor();
          Cursor newCursor = null;
          switch (transfo) {
               case TransformableImage.MOVE : newCursor = MOVE_CURSOR;
                    break;
               case TransformableImage.RESIZE_TOP : newCursor = VERTICAL_RESIZE_CURSOR;
                    break;
               case TransformableImage.RESIZE_BOTTOM : newCursor = VERTICAL_RESIZE_CURSOR;
                    break;
               case TransformableImage.RESIZE_LEFT : newCursor = HORIZONTAL_RESIZE_CURSOR;
                    break;
               case TransformableImage.RESIZE_RIGHT : newCursor = HORIZONTAL_RESIZE_CURSOR;
                    break;
               case TransformableImage.RESIZE_TOP_LEFT_CORNER : newCursor = NW_SE_RESIZE_CURSOR;
                    break;
               case TransformableImage.RESIZE_TOP_RIGHT_CORNER : newCursor = NE_SW_RESIZE_CURSOR;
                    break;
               case TransformableImage.RESIZE_BOTTOM_LEFT_CORNER : newCursor = NE_SW_RESIZE_CURSOR;
                    break;
               case TransformableImage.RESIZE_BOTTOM_RIGHT_CORNER : newCursor = NW_SE_RESIZE_CURSOR;
                    break;
               default : newCursor = DEFAULT_CURSOR;
          if (newCursor != null && currentCursor != newCursor) {
               setCursor(newCursor);
     public static void main(String[] args) {
          JFrame frame = new JFrame("Test transformable images");
          frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          frame.getContentPane().add(new ImagePanel(), BorderLayout.CENTER);
          frame.pack();
          frame.setVisible(true);
Denis