Drag & drop

• Nodes being dragged (1);
• Node where to drop nodes (2);
• Drop marker (3);
• Drag & drop content thumbnail (4). It can be either a dragged nodes image or a custom image (shown on the image below).

Drag & drop options

All drag & drop settings are stored in the DragDropOptions treeview property and allow you to control drag & drop behavior:

• AllowDrag– defines whether the treeview can start drag nodes;
• AllowDrop– defines whether the treeview can drop a node;
• DragStartSensitivity – the size of a rectangle in pixels, centered on the point the mouse button was pressed, within which a drag operation will not begin;
• DropAction – defines an automatic action to do by the treeview when nodes has been dropped;
• ShowDragContent – indicates whether to show an image, near the mouse cursor, of the nodes being dragged;
• DragContentOpacity – defines the opacity level of the dragged content image near the mouse cursor. Works only when the ShowDragContent property is enabled.

DropAction

Flexible TreeView allows to perform an automatic action when nodes dropped on drag & drop. To define such an action use DropAction property.
Available actions:

• Notify - do not do any automatic actions, instead notify about termination of drag & drop operation by the DragDrop event;
• AutoMove - automatically move dragged nodes into the specified node in this or any other tree;
• AutoCopy - copy nodes if, while dragging the nodes, the Control button was pressed. Use Clone node method to copy the nodes;
• AutoMoveOrCopy - use the AutoMove mode if the Control button wasn't pressed when you dragged the nodes, or use the AutoCopy mode in case the Control button was pressed.

AutoCopy and NodeControlContainer

If you use NodeControlContainer node control to display a custom control in the node when the AutoCopy mode is enabled, the displayed custom control should implement the IСloneable interface to let the node be completely cloned.

Drag & drop run-time information

All the information about current drag & drop operation is stored in the DragDropState treeview property.
You have these options to analyze the drag & drop in run-time:

• Position - defines where to drop nodes being dragged in relation to the node in the TargetNode property. Available values are Inside, Before and After;
• TargetNode - a node where to drop nodes not taking into account the drop position (Before and After values) in the Position property;
• RealTargetNode - a node where to drop nodes taking into account the drop position in the Position property. If the Position is Before, this property returns a previous visible node to the TargetNode node; if After - next visible node;
• NodeControl - a node control under the mouse cursor;
• Effects - allowed drag & drop effects (move, copy and so on);
• IsDragging - defines whether current drag & drop operation is in action right now;
• ContentThumbnailImage - intended to change an image near the mouse cursor when drag & drop in action. If custom image is not defined, treeview shows nodes being dragged image.

Drag & drop within one treeview

Flexible TreeView supports drag & drop within one treeview without a single line of code. To do that, enable the DragDropOptions.AllowDrag and DragDropOptions.AllowDrop treeview properties to allow you to drag and drop nodes respectively; and set the drop action using the DragDropOptions.DropAction treeview property.

Drag & drop between treeviews

Flexible TreeView allows you to drag & drop nodes between many treeviews without a single line of code. To do that, enable the DragDropOptions.AllowDrag and DragDropOptions.AllowDrop treeview properties to allow you to drag and drop nodes respectively; and set the drop action using the DragDropOptions.DropAction treeview property.

Drag & drop between treeview and other control

Flexible TreeView allows to drag & drop nodes between treeview and any other control. To do that, enable the DragDropOptions.AllowDrag, DragDropOptions.AllowDrop treeview properties; select appropriate drop action using the DragDropOptions.DropAction property and use the code below.

Drag & drop from the other control to a treeview:

1. Enable the drag & drop in the other control. For example, for standard ListBox control you need to handle the MouseDown event like this:

void listBox_MouseDown(object sender, MouseEventArgs e)
{
  int indexOfItem = lbListBox.IndexFromPoint(e.X, e.Y);
 
  if (indexOfItem >= 0 && indexOfItem < lbListBox.Items.Count)
  {
    // select the clicked listbox item.
    lbListBox.ClearSelected();
    lbListBox.SelectedIndex = indexOfItem;
 
    // start drag & drop.
    lbListBox.DoDragDrop(lbListBox.Items[indexOfItem], DragDropEffects.Copy);
  }
}

private void tree_DragDrop(object sender, DragEventArgs e)
{
  FlexibleTreeView tree;
  string text;
 
  tree = (FlexibleTreeView)sender;
  if(tree.DragDropState.RealTargetNode == null)
    return;
 
  // import data from an external control into treeview.
  if (e.Data.GetDataPresent(DataFormats.StringFormat))
  {
    text = (string)e.Data.GetData(DataFormats.Text);
    Node node = new Node(text);
    node.AttachTo(tree.DragDropState.RealTargetNode);
  }
}

Drag & drop a node from the treeview to an other control:

Handle the DragDrop control event:

void control_MouseDown(object sender, MouseEventArgs e)
{
  DragDropContent dragContent;
  FlexibleTreeView tree;
 
  tree = (FlexibleTreeView)sender;
  dragContent = e.Data.GetData(typeof(DragDropContent)) as DragDropContent;
 
  if (dragContent != null)
  {
    // custom drop logic here using dragContent.Nodes as list of dragged nodes.
  }
}

Auto–expanding

When you drag nodes, Flexible TreeView can auto–expand a node under the mouse cursor to make it easy to drop dragged nodes in there. To enable this, set the DragDropOptions.AutoExpandMode treeview property to one of these values:

• Disabled – do not auto–expand a node under the mouse cursor;
• PlusMinus – auto–expand a node only if the mouse is over the plus-minus sign;
• PlusMinusAndNodeBody – auto–expand a node if the mouse is over it. You can also set a delay before auto–expanding by using the DragDropOptions.AutoExpandDelay treeview property.

Auto–collapsing

If a node has been auto–expanded and the mouse exceeds beyond the node bounds, Flexible TreeView can auto–collapse this node. To enable that, enable the DragDropOptions.AutoCollapse treeview property (enabled by default). Also, you can set a delay before auto–collapse by using the DragDropOptions.AutoCollapseDelay treeview property.

Thumbnail image near the mouse cursor

On drag & drop you can customize an image near the mouse cursor which shows the nodes that are being dragged. To do that, subscribe to the DragGetImage treeview event and assign the pArgs.Image property to a custom image.

API reference

Events

• DragStarting - occurs before drag & drop started;
• DragGetImage - occurs when the treeview need a drag & drop image to show near the mouse cursor;
• FilterDragNodeControl - occurs when the treeview starts the drag & drop and need to show a thumbnail image near the mouse cursor with node controls of the nodes being dragged.