Drag & drop

Flexible TreeView provides flexible drag & drop support within one treeview, between many treeviews, or between treeview and any other control.

The drag & drop operation consists from these parts (see the picture below):

• Nodes being dragged (1);
• Node, where to drop nodes (2);
• Drop marker (3);
• Drag & drop content thumbnail (4). It can be either the 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;
• AutoMoveNodes – indicates whether to automatically move dragged nodes to a new parent or raise the OnDragDrop treeview event instead;
• 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.

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;
• RealNode - 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 enable the DragDropOptions.AutoMoveNodes treeview property to auto–move dropped nodes to a new parent node.

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 enable the DragDropOptions.AutoMoveNodes treeview property to auto–move dropped nodes between treeviews.

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 and DragDropOptions.AutoMoveNodes treeview properties 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.RealNode == 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.RealNode);
  }
}

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.