Dragging Image using MouseDrag method

Question

I'm trying to code where an image can be dragged using the mouseDragged method, but I can't seem to successfully do it with my current code. My aim is to ensure that when I place drag on every image in the applet, it follows the cursor.

/* Using drag mouseEvent, all objects in the app can be dragged...
 */
package finals_two;
import java.applet.*;
import java.awt.*;
import java.awt.event.*;
/* 10/16/2015
 * @author michael.pabilona
 */
public class Finals_Two extends Applet implements MouseMotionListener
{
    int hei, wid, xCoordinate, yCoordinate;
    Image leftReceiver1, leftReceiver2, leftReceiver3;
    Image rightReceiver1, rightReceiver2, rightReceiver3;    
    Image leftSpiker, rightSpiker, center, setter;

    public void init()
    {
        hei = getSize().height;
        wid = getSize().width;
        xCoordinate = hei;
        yCoordinate = wid;
        addMouseMotionListener(this);
    }

    public void mouseDragged(MouseEvent e)
    {
        xCoordinate = e.getX();
        yCoordinate = e.getY();
        repaint();
    }

    public void paint(Graphics gr)
    {
        setBackground(Color.white);
        gr.setColor(Color.black);
        //court bound top line
        gr.drawLine(400, 130, 1200, 130);
        //court bound bottom line
        gr.drawLine(200, 530, 1000, 530);
        //court bound left line
        gr.drawLine(400, 130, 200, 530);
        //court bound right line
        gr.drawLine(1000, 530, 1200, 130);
        //net
        gr.drawLine(800, 130, 600, 530);
        gr.drawLine(800, 130, 800, 0);
        gr.drawLine(600, 530, 600, 400);
        //net horizontal lines
        gr.drawLine(800, 0, 600, 400);
        gr.drawLine(800, 10, 600, 410);
        gr.drawLine(800, 20, 600, 420);
        gr.drawLine(800, 30, 600, 430);
        gr.drawLine(800, 40, 600, 440);
        gr.drawLine(800, 50, 600, 450);
        gr.drawLine(800, 60, 600, 460);
        gr.drawLine(800, 70, 600, 470);
        gr.drawLine(800, 80, 600, 480);
        //net vertical lines
        gr.drawLine(795, 5, 795, 90);
        gr.drawLine(790, 20, 790, 100);
        gr.drawLine(785, 30, 785, 110);
        gr.drawLine(780, 40, 780, 120);
        gr.drawLine(775, 50, 775, 130);
        gr.drawLine(770, 60, 770, 140);
        gr.drawLine(765, 70, 765, 150);
        gr.drawLine(760, 80, 760, 160);
        gr.drawLine(755, 90, 755, 170);
        gr.drawLine(750, 100, 750, 180);
        gr.drawLine(745, 110, 745, 190);
        gr.drawLine(740, 120, 740, 200);
        gr.drawLine(735, 130, 735, 210);
        gr.drawLine(730, 140, 730, 220);
        gr.drawLine(725, 150, 725, 230);
        gr.drawLine(720, 160, 720, 240);
        gr.drawLine(715, 170, 715, 250);
        gr.drawLine(710, 180, 710, 260);
        gr.drawLine(705, 190, 705, 270);
        gr.drawLine(700, 200, 700, 280);
        gr.drawLine(695, 210, 695, 290);
        gr.drawLine(690, 220, 690, 300);
        gr.drawLine(685, 230, 685, 310);
        gr.drawLine(680, 240, 680, 320);
        gr.drawLine(675, 250, 675, 330);
        gr.drawLine(670, 260, 670, 340);
        gr.drawLine(665, 270, 665, 350);
        gr.drawLine(660, 280, 660, 360);
        gr.drawLine(655, 290, 655, 370);
        gr.drawLine(650, 300, 650, 380);
        gr.drawLine(645, 310, 645, 390);
        gr.drawLine(640, 320, 640, 400);
        gr.drawLine(635, 330, 635, 410);
        gr.drawLine(630, 340, 630, 420);
        gr.drawLine(625, 350, 625, 430);
        gr.drawLine(620, 360, 620, 440);
        gr.drawLine(615, 370, 615, 450);
        gr.drawLine(610, 380, 610, 460);
        gr.drawLine(605, 390, 605, 470);
        gr.drawLine(600, 390, 600, 480);
        //left mid line
        gr.drawLine(625, 130, 425, 530);
        //right mid line
        gr.drawLine(975, 130, 775, 530);
        //left backend receivers
        leftReceiver1 = getImage(getDocumentBase(),"receiver.jpg");
        gr.drawImage(leftReceiver1, 400, 100, 90, 90, this);
        leftReceiver2 = getImage(getDocumentBase(),"receiver.jpg");
        gr.drawImage(leftReceiver2, 325, 250, 90, 90, this);
        leftReceiver3 = getImage(getDocumentBase(),"server1.jpg");
        gr.drawImage(leftReceiver3, 75, 375, 150, 150, this);      
        //right backend receivers
        rightReceiver1 = getImage(getDocumentBase(),"receiver1.jpg");
        gr.drawImage(rightReceiver1, 1000, 100, 100, 100, this);
        rightReceiver2 = getImage(getDocumentBase(),"receiver1.jpg");
        gr.drawImage(rightReceiver2, 950, 250, 100, 100, this);
        rightReceiver3 = getImage(getDocumentBase(),"receiver1.jpg");
        gr.drawImage(rightReceiver3, 900, 400, 100, 100, this);
        //left front liners
        leftSpiker = getImage(getDocumentBase(),"spiker.jpg");
        gr.drawImage(leftSpiker, 650, 30, 100, 100, this);
        center = getImage(getDocumentBase(),"spiker.jpg");
        gr.drawImage(center,600,150,100,100,this);
        setter = getImage(getDocumentBase(),"setter.jpg");
        gr.drawImage(setter, 500, 300, 150, 150, this);
        //right front liners
        rightSpiker = getImage(getDocumentBase(),"spiker1.jpg");
        gr.drawImage(rightSpiker,650,350,130,130,this);
        center = getImage(getDocumentBase(),"server.jpg");
        gr.drawImage(center,750,150,130,130,this);        
        setter = getImage(getDocumentBase(),"defense1.jpg");
        gr.drawImage(setter,850,90,110,110,this);
    }


    @Override
    public void mouseMoved(MouseEvent e) {
        throw new UnsupportedOperationException("Not supported yet."); //To change body of generated methods, choose Tools | Templates.
    }


}

This is my current code. Can someone direct me what I am missing or what I did wrong here?

Answer 1

In order to drag anything, you need to know a few things. You need to know where they are and the space the occupy.

Once you know that, you can monitor the mouseDragged event and update their location.

import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.Point;
import java.awt.Rectangle;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class DragMe {

    public static void main(String[] args) {
        new DragMe();
    }

    public DragMe() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.add(new TestPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class TestPane extends JPanel {

        private Map<Image, Point> locations;

        public TestPane() {
            locations = new HashMap<>(25);
            try {
                locations.put(ImageIO.read(getClass().getResource("/Pony.png")), new Point(0, 0));
            } catch (IOException ex) {
                ex.printStackTrace();
            }

            MouseAdapter ma = new MouseAdapter() {

                private Image dragImage;
                private Point clickOffset;

                @Override
                public void mousePressed(MouseEvent e) {
                    for (Map.Entry<Image, Point> entry : locations.entrySet()) {
                        Image image = entry.getKey();
                        Point point = entry.getValue();
                        Rectangle bounds = new Rectangle(
                                        point.x, point.y,
                                        image.getWidth(TestPane.this), image.getHeight(TestPane.this));
                        if (bounds.contains(e.getPoint())) {
                            dragImage = image;
                            clickOffset = new Point(point.x - e.getPoint().x, point.y - e.getPoint().y);
                            break;
                        }
                    }
                }

                @Override
                public void mouseReleased(MouseEvent e) {
                    dragImage = null;
                    clickOffset = null;
                }

                @Override
                public void mouseDragged(MouseEvent e) {
                    if (dragImage != null) {
                        Point dragPoint = new Point(e.getPoint());
                        dragPoint.x += clickOffset.x;
                        dragPoint.y += clickOffset.y;

                        locations.put(dragImage, dragPoint);
                        repaint();
                    }
                }

            };

            addMouseListener(ma);
            addMouseMotionListener(ma);
        }

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(400, 400);
        }

        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            Graphics2D g2d = (Graphics2D) g.create();
            for (Map.Entry<Image, Point> entry : locations.entrySet()) {
                Point point = entry.getValue();
                g2d.drawImage(entry.getKey(), point.x, point.y, this);
            }
            g2d.dispose();
        }

    }

}