# Drag and Drop Nodes

## Content

You can drag-and-drop [C1TreeViewItem](/componentone/api/wpf/online-basiclibrary/dotnet-framework-api/C1.WPF.4.6.2/C1.WPF.C1TreeViewItem.html)s on nodes, in between nodes, or from one tree to another tree when the [AllowDragDrop](/componentone/api/wpf/online-basiclibrary/dotnet-framework-api/C1.WPF.4.6.2/C1.WPF.C1TreeView.AllowDragDrop.html) property is set to True.
The following image shows a **C1TreeViewItem** being dragged from one **C1TreeView** to another **C1TreeView**. An arrow or vertical line can be used as a visual cue to show you where the **C1TreeViewItem** is going to be dropped when either the [DragDropArrowMarker](/componentone/api/wpf/online-basiclibrary/dotnet-framework-api/C1.WPF.4.6.2/C1.WPF.C1TreeView.DragDropArrowMarker.html) or [DragDropLineMarker](/componentone/api/wpf/online-basiclibrary/dotnet-framework-api/C1.WPF.4.6.2/C1.WPF.C1TreeView.DragDropLineMarker.html) properties are applied.
![](https://cdn.mescius.io/document-site-files/images/7e9deccd-1f1c-4ec7-af90-b4332b45dead/images/treeview/draganddrop.png)
To set the **AllowDragDrop** property to **True**, use the following code:

```vbnet
C1TreeView.AllowDragDrop = True
```

```csharp
C1TreeView.AllowDragDrop = true;
```

## Customize Source Marker and Target Marker

ComponentOne TreeView allows users to customize the appearance of the source marker and target marker to match their application's design and usability requirements. The appearance of the source marker and the target marker can be customized using two properties:

* **DragSourceStyle**
* **DragTargetStyle**

### Default

By default, the source marker appears as a small rectangular silhouette representing the element being dragged, while the target marker is displayed as a simple line or highlight indicating the intended drop position. Both markers have a fixed default size of one item and a fixed color. The default appearance is automatically applied if custom styles are not defined.

### Customize Source Marker

Customize the visual appearance (size, color, border, shape, and more) of the source marker using **DragSourceStyle**. The following code snippet demonstrates how to apply a custom style.

```auto
<Style x:Key="CustomSourceMarkerStyle" TargetType="Border">
    <Setter Property="Background" Value="#88808080"/>
    <Setter Property="BorderBrush" Value="#AAAAAA"/>
    <Setter Property="Height" Value="20"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="CornerRadius" Value="3"/>
</Style>
```

### Customize Target Marker

Customize the visual appearance (size, color, border, shape, and more) of the target marker using **DragTargetStyle**. The following code snippet demonstrates how to apply a custom style.

```auto
<Style x:Key="CustomTargetMarkerStyle" TargetType="Border">
    <Setter Property="Background" Value="#88808080"/>
    <Setter Property="BorderBrush" Value="#3d3dFF"/>
    <Setter Property="Height" Value="20"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="CornerRadius" Value="3"/>
</Style>
```

**Build and Verify**
The end appearance will reflect the styles defined by the user:
![022c5e9f-38cd-4333-b897-27536b772581.gif](https://docapp.mescius.io/DOCUMENT_SITE_LINK_PREFIX_HERE/document-site-files/images/53da75e2-ea00-4cd9-af60-2a0e931e05ea/022c5e9f-38cd-4333-b897-27536b772581.bbb9e7.gif?width=500)