Link to home
Start Free TrialLog in
Avatar of Cyber-Drugs
Cyber-DrugsFlag for United Kingdom of Great Britain and Northern Ireland

asked on

C# - Drag and Drop Image with extra functionality

Hi guys 'n gals,

I've tried googling for this solution, but can't find it (as I'm most likely not searching for the correct thing).

Basically, I want to be able to create a function which allows me to do the following:


Drag and Drop an image from Point A, and drop it at Point B, but rather than moving the actual original image, I want to drag and drop an exact copy of the image. I also need to be able to determine where it is being dropped, so to check if it's being dropped out of a set boundary, it is to be destroyed, or moved back to it's original place, rather than being dropped.


I can be better explain myself if required, please just ask!


Cheers!!
Avatar of theGhost_k8
theGhost_k8
Flag of India image

hay dude,
Drag drop on picture box / form / anyother control !!!
again what you are asking is little specific... so you will be getting the NEAREST solutions.
            let me see if i can do something about this.... hold on, dude...
                     
WinForms or WebForms?

What are you dropping on?...a Panel? the Form?...possible multiple other controls?

Give us more details...
Avatar of Cyber-Drugs

ASKER

Hey theGhost_k8,

Sorry for it being so specific, if it makes things easier, I'd like to for now, just have the functionality to drag and drop an image and the image dragged/dropped is a clone of the source image. I can look into adding the extra functionality myself.

Cheers!
Idle_Mind,

WinForms = yes
WebForms = no

I am basically converting an application I created in XHTML/DHTML/JavaScript/AJAX/PHP into a C# application.
ASKER CERTIFIED SOLUTION
Avatar of Mike Tomlinson
Mike Tomlinson
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I'll give that a try a bit later tonight, cheers!
Avatar of Gautham Janardhan
Gautham Janardhan

say ur image is in a panel first allow drag drop true for the panel where u want to drag the stuff

then on mouse down do this

DoDragDrop(panel1.Image,DragDropEffects.Copy);

then on panel2 where u want to put the stuff hook the dragenter event and do this

if (e.Data.GetDataPresent(typeof(Image)))
                  {
                        e.Effect = DragDropEffects.Copy;
                  }
                  else
                  {
                        e.Effect = DragDropEffects.None;
                  }

then hook the dragdrop event of the same panel2 and do

Iamge FTemp = (Image)e.Data.GetData(typeof(Image));
                  panel2.Image = Ftemp;
gauthampj,

Is it possible to do your code for a picture box inside the panel, rather than an embedded image inside the panel?



Idea_Mind,

Your code gives me the drag and drop functionality, but the thing is that I don't want to drag the original image, I want to drag and drop a copy of the original image. A bit like in Visio (if you've ever used it?), where you can drag and drop shapes from a Catalog onto the drawing space.


Cheers guys!
s it would

istead of the panel u can specify any container control
Maybe I am misunderstanding your code, but does it make a copy of the image into the new container, where I can hold multiple copies, or does it do a single straight copy?
So you most likely have two panels?...one for the "catalog" and one for the "canvas"?

So we have to drag the new PB "above the panels" on the form itself and then check for intersections when it is dropped.

I'll play with it...
I just got home now myself (work working on this during my lunch break connecting home remotely), so didn't get a chance to really play with it. As you got the drag and drop feature up and working, I'll play around with duplicating the existing PB with the drag and drop, and then try add in checks to see where the PB is being dropped.

Shall post any results I find.

Cheers for the help thus far, and sorry that it's such a big question, appreciate the help!
So far I have this:


panel1 (catalog)
panel2 (canvas)
Picturebox1 (source image, located inside panel1)

and this code:


using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace DragDrop
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        int startX, startY;

        private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
        {
            if (e.Button == MouseButtons.Left)
            {
                startX = e.X;
                startY = e.Y;
            }
        }

        private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.Button == MouseButtons.Left)
            {
                PictureBox myPic = new PictureBox();
                myPic.Name = "PictureBox2";
                myPic.Height = pictureBox1.Height;
                myPic.Width = pictureBox1.Width;
                myPic.Location = new Point(pictureBox1.Left + e.X - startX, pictureBox1.Top + e.Y - startY);
                myPic.Image = pictureBox1.Image;

                this.Controls.Add(myPic);
                myPic.Show();
            }
        }
    }
}



Doesn't quite work, doesn't throw an error, but doesn't quite work... Any thoughts?
I now have it trapped inside panel1, which is great, except it's not drawing the new image, it's smudging the image from the source point to the destination point...


Only change made to above code is this:

Swap:
this.Controls.Add(myPic);
For:
this.panel1.Controls.Add(myPic);
Ok, got it to do 95% of what I want!

Basically, I just need to find a way to change the Z-Index of my picture, so that it is higher than that of the two panels, so that while it is being dragged, I can see where it is.


Here is the code I have so far:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace DragDrop
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        int startX, startY;
        PictureBox myPic = new PictureBox();

        private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
        {
            if (e.Button == MouseButtons.Left)
            {
                startX = e.X;
                startY = e.Y;
            }
        }

        private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.Button == MouseButtons.Left)
            {
                myPic.Name = "PictureBox2";
                myPic.Height = pictureBox1.Height;
                myPic.Width = pictureBox1.Width;
                myPic.SizeMode = PictureBoxSizeMode.StretchImage;
                myPic.Location = new Point(pictureBox1.Left + e.X - startX, pictureBox1.Top + e.Y - startY);
                myPic.Image = pictureBox1.Image;
                if (this.Controls.Contains(myPic) == false)
                {
                    this.Controls.Add(myPic);
                }
            }
        }

        private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
        {
            if (myPic.Left >= panel2.Left && myPic.Top >= panel2.Top && myPic.Left + myPic.Width <= panel2.Left + panel2.Width && myPic.Top + myPic.Height <= panel2.Top + panel2.Height)
            {
                myPic.Location = new Point(myPic.Left - panel2.Left, myPic.Top - panel2.Top);
                this.panel2.Controls.Add(myPic);
            }
            else
            {
                MessageBox.Show("Out of bounds.");
            }
        }
    }
}
After having thought about it, this question has been solved. What I need now, should be in another question.

As I used the code by Idle_Mind, I shall be awarding the points to him.

Cheers for all the help guys!