DragDrop to move a picture box at run time

Question

I have a PictureBox called pic, placed inside another PictureBox called picTrack.

My goal is to be able to let the user, at run time, change the position of pic by draging it.

This is what I have so far:

    int x_offset = 0; // any better to do this without having a global variable?
    int y_offset = 0;
    void pic_MouseDown(object sender, MouseEventArgs e)
    {
        PictureBox me = (PictureBox)sender;
        x_offset = me.Left - e.X;
        y_offset = me.Top - e.Y;
    }

    void pic_MouseMove(object sender, MouseEventArgs e)
    {
        if (e.Button == System.Windows.Forms.MouseButtons.Left)
        {
            PictureBox me = (PictureBox)sender;
            me.Left = e.X + x_offset; 
            me.Top = e.Y + y_offset;
            picTrack.Invalidate();
        }
    }

This code only works at a very basic level. I have 2 problems with it:

1.) picTrack is not updated if the user does not let go of the mouse button. Ghost images of pic can be seen while pic is getting moved around (it's like pic is having a tail).

2.) pic is "giggling" (i.e. rapidly shaking left and right, up and down, around its location).

How should I solve these 2 problems and create a more smooth drag & drop? Thanks.

Answer 1

Here this actually works, I've written quite a few dragging things before.. it may not be perfect but this should give you something to work with.

    Point dragPoint = Point.Empty;
    bool dragging = false;

    private void pic_MouseDown(object sender, MouseEventArgs e)
    {
        dragging = true;
        dragPoint = new Point(e.X, e.Y);
    }

    private void pic_MouseMove(object sender, MouseEventArgs e)
    {
        if (dragging)
            pic.Location = new Point(pic.Location.X + e.X - dragPoint.X, pic.Location.Y + e.Y - dragPoint.Y);
    }

    private void pic_MouseUp(object sender, MouseEventArgs e)
    {
        dragging = false;
    }

See, if you were dragging a local picture that you were just rendering yourself, this wouldn't be right.. but since you are moving a control after you move it, the new move coordinates are relative to the control. Therefore, you do not need to update dragPoint to the last position on move. If you were just moving a shape/image you were rendering OnPaint, you'd have to do update the drag point each movement.

There's one improvement you could make, if desired, which is to only start dragging if the user moves the cursor a certain distance D. For example, something like this:

    Point dragPoint = Point.Empty;
    bool dragging = false;
    bool mouseDown = false;

    private void pic_MouseDown(object sender, MouseEventArgs e)
    {
        mouseDown = true;
        dragPoint = new Point(e.X, e.Y);
    }

    private void pic_MouseMove(object sender, MouseEventArgs e)
    {
        int deltaX = e.X - dragPoint.X;
        int deltaY = e.Y - dragPoint.Y;

        if (!dragging && mouseDown && deltaX * deltaX + deltaY * deltaY > 100)
            dragging = true;

        if (dragging)
            pic.Location = new Point(pic.Location.X + deltaX, pic.Location.Y + deltaY);
    }

    private void pic_MouseUp(object sender, MouseEventArgs e)
    {
        dragging = false;
        mouseDown = false;
    }

Which checks if the user has moved the mouse 10 pixels (sqrt of 100).

If you don't want a global, you could try implementing your own behavior system and creating a reusable piece of code that you can attach to things you want to move. Something like this:

public class Behavior<T> where T : class 
{
    public T AssociatedObject
    {
        get;
        private set;
    }

    public Behavior(T associatedObject)
    {
        this.AssociatedObject = associatedObject;
    }

    public virtual void Attach() { }
    public virtual void Detach() { }
}

public class DragBehavior : Behavior<Control>
{
    Point dragPoint = Point.Empty;
    bool dragging = false;
    bool mouseDown = false;

    public DragBehavior(Control c) : base(c)
    {

    }

    public override void Attach()
    {
        AssociatedObject.MouseDown += new MouseEventHandler(control_MouseDown);
        AssociatedObject.MouseMove += new MouseEventHandler(control_MouseMove);
        AssociatedObject.MouseUp += new MouseEventHandler(control_MouseUp);
    }

    private void control_MouseUp(object sender, MouseEventArgs e)
    {
        dragging = false;
        mouseDown = false;
    }

    private void control_MouseMove(object sender, MouseEventArgs e)
    {
        int deltaX = e.X - dragPoint.X;
        int deltaY = e.Y - dragPoint.Y;

        if (mouseDown && deltaX * deltaX + deltaY * deltaY > 100)
            dragging = true;

        if (dragging)
            AssociatedObject.Location = new Point(AssociatedObject.Location.X + deltaX, AssociatedObject.Location.Y + deltaY);
    }

    private void control_MouseDown(object sender, MouseEventArgs e)
    {
        mouseDown = true;
        dragPoint = new Point(e.X, e.Y);
    }

    public override void Detach()
    {
        AssociatedObject.MouseDown -= new MouseEventHandler(control_MouseDown);
        AssociatedObject.MouseMove -= new MouseEventHandler(control_MouseMove);
        AssociatedObject.MouseUp -= new MouseEventHandler(control_MouseUp);
    }
}

public partial class Form1 : Form
{
    DragBehavior dragger;

    public Form1()
    {
        InitializeComponent();
        DoubleBuffered = true;

        dragger = new DragBehavior(pic);
        dragger.Attach();
    }       
}

Maybe that is better than "creating a global variable" (or more like creating a member variable in your form. =)

Answer 2

Try this

int x_offset = 0; // any better to do this without having a global variable?
int y_offset = 0;
private void pic_MouseDown(object sender, MouseEventArgs e)
{
   PictureBox me = (PictureBox)sender;
   x_offset = e.X;
   y_offset = e.Y;
}

private void pic_MouseMove(object sender, MouseEventArgs e)
{
  if (e.Button == System.Windows.Forms.MouseButtons.Left)
  {
     PictureBox me = (PictureBox)sender;
     me.Left = e.X + me.Left - x_offset;
     me.Top = e.Y + me.Top - y_offset;
   }
}