Drag and Drop Using C#

Tools Used: Visual C# .NET

 

 

Drag and Drop in C# has been a question on the UseNet and many websites on C# so I have decided to tackle the problem here. This is an update of the directory tree component download on this web site. The directory component allows you to peruse directories and files. To demonstrate drag and drop, I've added to the component the capability of dragging and dropping files from within the treeview. If you hold the control key down, you can also copy files. All the source for this is in the download above.

 

Drag and Drop in C#

 

Microsoft has added a series of properties and events to help you use drag and drop with your controls.  You must set the AllowDrop property to allow for dragging and dropping within the tree view. Also, there are about 5 major events available for trapping drag-drop operations.  We use 4 of them here:  ItemDrag, DragOver, DragEnter, and DragDrop.

 

Event	How It is Triggered
ItemDrag	The Initial Event triggered when the user starts to drag an item in the treeview.
DragOver	This is specific to treeviews and listviews and traps the item being dragged in the event parameter. AlsoHere is where you call DoDragDrop
DragEnter	This event occurs when the user drags over a drag and drop control with the mouse during a drag-drop operation
DragLeave	Occurs when the user moves the mouse onto the control when dragging an object.
DragDrop	Occurs when the user releases the mouse over the drop target
GiveFeedback	Gives feedback about the effects and the current cursor

 

The Drag and Drop functionality also has another facet of control called DragDropEffects. Below is a table of these enumerations:

 

Effects	Description
Move	The drag appears as a box along with the cursor. Data is moved to the target through the drop operation.
Copy	The drag appears as a box with a plus sign along with the cursor. Data is copied to the target through the drop operation.
Scroll	The drop target is scrolling while the item is being dragged.
Link	Data from the source of the item being dragged is linked to the target it is being dropped into.
All	The data is moved and scrolled in the drop target

 

The only effects we are concerned with in this example is the Move and Copy Effects. When the user begins dragging, the delegated method below is called and it is here where we initiate the drag drop functionality by calling DoDragDrop. Do drag drop passes the data and the effect to initiate. We set the effect based on whether the user has pressed the control key or not.  In this example, we don't actually use the data, since it's part of the same control, so it isn't so important what the first parameter is. We just maintain what is being dragged in a field of our class. Note that the Node being dragged is determined from the ItemDragEventArg received in this method:

protected void treeView1_ItemDrag(object sender, System.WinForms.ItemDragEventArgs e)
{
    // Remember the Item being dragged if it is a file node (ImageIndex == 2)
    TreeNode aNode = (TreeNode)e.Item;
    Bitmap bmp = imageList1.GetBitmap(2);
    // Only drag if it is a file, where not dragging directories in this example
    if (aNode.ImageIndex == 2)
    {
        StartNode = aNode;
        //The effect was previously set based on whether the ctrl key was pressed.
        // If it was, the effect will be copy otherwise it will be move
        // Set the state of the drag-drop operation, the state is a local enumeration in our class
        if (CurrentEffect == DragDropEffects.Move)
        {
            CurrentState = States.Move;
        }
        else
        {
            CurrentState = States.Copy;
        }
        // DoDragDrop sets things in motion for the drag drop operation by passing the data and the current effect
        // Data can be a bitmap, string or something that implements the IDataObject interface
        this.DoDragDrop(imageList1.GetBitmap(aNode.ImageIndex), CurrentEffect);
    }
}

Once the drag and drop operation is set in motion, we need to handle the events along the way.  Below we handle DragOver by highlighting folders as we drag over them.  DragEnter just maintains the effect:

protected void treeView1_DragOver(object sender, System.WinForms.DragEventArgs e)
{
    // set the effect again to maintain the effect we set in the DoDragDrop, (Seems you have to do this, may be a bug)
    e.Effect = CurrentEffect;
    // Determine the node we are dragging over
    // FindTreeNode is a local function of this class that determines the node from a point
    TreeNode aNode = FindTreeNode(e.X, e.Y);
    if (aNode != null)
    {
        // If the node is a folder, change the color of the background to dark blue to simulate selection
        // Be sure to return the previous node to its original color by copying from a blank node
        if ((aNode.ImageIndex == 1) || (aNode.ImageIndex == 0))
        {
            aNode.BackColor = Color.DarkBlue;
            aNode.ForeColor = Color.White;
            if ((OldNode != null) && (OldNode != aNode))
            {
                OldNode.BackColor = OriginalNode.BackColor;
                OldNode.ForeColor = OriginalNode.ForeColor;
            }
            OldNode = aNode;
        }
    }
}
protected void treeView1_DragEnter(object sender, System.WinForms.DragEventArgs e)
{
    e.Effect = CurrentEffect;
}

When we let go of the mouse while dragging, the DragDrop event is triggered.  Here we can copy or move our file node, depending on what effect was set.

// called last when mouse released during a drop
protected void treeView1_DragDrop(object sender, System.WinForms.DragEventArgs e)
{
    // set a flag indicating if we are moving or not. If we are not moving, then we are copying
    bool movingFile = (CurrentEffect == DragDropEffects.Move);
    // determine the node we are dropping into from the coordinates of the DragEvent Arguement
    TreeNode DropNode = FindTreeNode(e.X, e.Y);
    // Reset the local state of the drag and the effect field
    CurrentState = States.Idle;
    CurrentEffect = DragDropEffects.Move;
    // If the drop target is a folder (not a file), then perform drop operations
    if (DropNode.ImageIndex != 2)
    {
        // it's a folder, drop the file
        if (movingFile)
        {
            MoveFile(StartNode, DropNode);// move the file from the startnode to the dropnode
        }
        else
        {
            CopyFile(StartNode, DropNode);// copy the file from the startnode to the dropnode
        }
        this.Invalidate(new Region(this.ClientRectangle)); // redraw the treeview
        treeView1.SelectedNode = DropNode; // select the drop node as the current selection
    }
}

The CopyFile and MoveFile methods perform some directory and file operations from the System.IO namespace.  They also populate and depopulate the tree, accordingly. Below is the MoveFile method for doing a file move and restructuring the directory tree:

private void MoveFile(TreeNode Node1, TreeNode Node2)
{
    string strdir1 = Node1.Parent.FullPath; // get the path of the source item
    string strdir2 = Node2.FullPath; // get the path of the drop target
    strdir1 = strdir1 + "\\" + Node1.Text; // create file paths using the name of the source item
    strdir2 = strdir2 + "\\" + Node1.Text;
    Directory.Move(strdir1, strdir2);// use the static Directory Move command to move a file
    TreeNode aNode = new TreeNode(Node1.Text, 2, 2); // create a new file node
    Node1.Remove(); // remove the old file node
    Node2.Nodes.Add(aNode); // add the new file node under the target directory node
}

I hope that this article reveals some of the mystery behind drag and drop. I'm still trying to figure out how to get the image to actually drag with the mouse (rather than a gray box) like it did in Visual C++.