• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 501
  • Last Modified:

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!!
0
Cyber-Drugs
Asked:
Cyber-Drugs
  • 10
  • 3
  • 2
  • +1
1 Solution
 
K VDatabase ConsultantCommented:
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...
                     
0
 
Mike TomlinsonMiddle School Assistant TeacherCommented:
WinForms or WebForms?

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

Give us more details...
0
 
Cyber-DrugsAuthor Commented:
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!
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Cyber-DrugsAuthor Commented:
Idle_Mind,

WinForms = yes
WebForms = no

I am basically converting an application I created in XHTML/DHTML/JavaScript/AJAX/PHP into a C# application.
0
 
Mike TomlinsonMiddle School Assistant TeacherCommented:
How about?...

On MouseDown(), store the starting Point in the Tag() property.
On MouseMove(), move the original PictureBox in real time.
On MouseUp(), put the original PictureBox back to its starting place using the Tag value.
Determine if you want a make copy.
If so, make a new PB, copy the Image and place it at the current position using e.X and e.Y...

To move a PB as the mouse is moved:

        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)
            {
                pictureBox1.Location = new Point(pictureBox1.Left + e.X - startX, pictureBox1.Top + e.Y - startY);
            }
        }
0
 
Cyber-DrugsAuthor Commented:
I'll give that a try a bit later tonight, cheers!
0
 
Gautham JanardhanCommented:
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;
0
 
Cyber-DrugsAuthor Commented:
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!
0
 
Gautham JanardhanCommented:
s it would

istead of the panel u can specify any container control
0
 
Cyber-DrugsAuthor Commented:
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?
0
 
Mike TomlinsonMiddle School Assistant TeacherCommented:
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...
0
 
Cyber-DrugsAuthor Commented:
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!
0
 
Cyber-DrugsAuthor Commented:
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?
0
 
Cyber-DrugsAuthor Commented:
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);
0
 
Cyber-DrugsAuthor Commented:
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.");
            }
        }
    }
}
0
 
Cyber-DrugsAuthor Commented:
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!
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 10
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now