javaswingappletpaintmouse-listeners

Dragging Image using MouseDrag method


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?


Solution

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

    DragMe

    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();
            }
    
        }
    
    }