# Drag & Drop

In Wisej.NET every control supports drag & drop operations, which is different from dragging (moving) the control itself. Drag & drop means that your application allows the user to drag data from one control to another.

For example, you may want to drag a row from a grid to an input field, or within the grid to change its position, or you may want to drag a node from a tree control to another.

Drag & drop in Wisej.NET works exactly the same as in a desktop application: set [AllowDrag ](https://docs.wisej.com/api/wisej.web/general/control#allowdrag)on the control that should initiate the drag operation and set [AllowDrop ](https://docs.wisej.com/api/wisej.web/general/control#allowdrop)on the control that can receive the dropped data.

When the user starts dragging, the control will fire the [DragStart ](https://docs.wisej.com/api/wisej.web/general/control#dragstart)event. You **must** handle this event and call the [DoDragDrop()](https://docs.wisej.com/api/wisej.web/general/control#dodragdrop-data-allowedeffects) method, otherwise the drag operation doesn't start.

```csharp
private void dataGridView1_DragStart(object sender, EventArgs e)
{
    this.dataGridView1.DoDragDrop(
        this.dataGridView1.SelectedRows.ToArray(),
        DragDropEffects.Copy | DragDropEffects.Move);
}
```

{% hint style="warning" %}
A common mistake is to call *this.DoDragDrop()* instead of *this.\[control].DoDragDrop()* when handling the event in a parent container. Make sure to call DoDragDrop() on the correct target.
{% endhint %}

The code above starts a drag operation using an array of selected row indexes as the **payload**, the user is basically dragging an array of integers. In addition to the payload, the call above also indicates that the drag operation allows only 2 [effects](https://docs.wisej.com/api/wisej.web/enumerations/wisej.web.dragdropeffects): Copy and Move. Conceptually it means that the payload can only be copied or moved. Another option is [Link](https://docs.wisej.com/api/wisej.web/enumerations/wisej.web.dragdropeffects).

Now you need to handle the dropping side, on the controls that can accept the dragged payload. This is done using either [DragEnter ](https://docs.wisej.com/api/wisej.web/general/control#dragenter)or [DragOver ](https://docs.wisej.com/api/wisej.web/general/control#dragover)or both.

The code below activates the Move drop [effect ](https://docs.wisej.com/api/wisej.web/enumerations/wisej.web.dragdropeffects)when the user drags the payload over button1. It also checks if the payload is present and is an array of integers.

```csharp
private void button1_DragEnter(object sender, DragEventArgs e)
{
    if (e.Data.GetDataPresent(typeof(int[])))
        e.Effect = DragDropEffects.Move;
    else
        e.Effect = DragDropEffects.None;
}
```

The last step is to receive the dropped data. You can do that by handling the [DragDrop ](https://docs.wisej.com/api/wisej.web/general/control#dragdrop)event. it is fired when the user finally releases the pointer over the target control.

```csharp
private void button1_DragDrop(object sender, DragEventArgs e)
{
    var indexes = (int[])e.Data.GetData(typeof(int[]));
}
```

## Data Object

The [data object](https://docs.wisej.com/api/wisej.web/general/wisej.web.dataobject) exposed by the [DragEventArgs ](https://docs.wisej.com/api/wisej.web/general/control/wisej.web.drageventargs)event data can hold any type of data and provides all sorts of functionality to check the presence of the data and extract the data.

{% hint style="info" %}
Drag & drop data is not limited to one format; you can create a [DataObject](https://docs.wisej.com/api/wisej.web/general/wisej.web.dataobject), assign multiple data with different formats and use it in the call to DoDragDrop().
{% endhint %}

## Detect Target

When the target is not a simple control like a button or a field, but it may contain multiple inner parts, you may need to detect where exactly the payload was dropped. In a [ListBox ](https://docs.wisej.com/api/wisej.web/lists-and-grids/wisej.web.listbox)you want to detect the item that received the drop, in a [TreeView ](https://docs.wisej.com/api/wisej.web/lists-and-grids/treeview)the child node, or in a [DataGridView](https://docs.wisej.com/api/wisej.web/lists-and-grids/datagridview) the specific row.

You will find the exact target in the [e.DropTarget](https://docs.wisej.com/api/wisej.web/general/control/wisej.web.drageventargs#droptarget) property. This is different for each control.

| Control      | DropTarget       |
| ------------ | ---------------- |
| ListBox      | Item             |
| TreeView     | TreeNode         |
| DataGridView | DataGridViewCell |
| ListView     | ListViewItem     |

In addition to the DropTarget property, the event data contains the location of the pointer and the key state of the keyboard to allow your app to detect what the user is pressing while dragging, in case you want to handle different drag effects.

## Drag Icon

When dragging, Wisej.NET shows the typical drag cursor you see in a desktop application (themeable).

However, you can change the drag cursor at any time and use any image of any size simply by assigning the [e.Image](https://docs.wisej.com/api/wisej.web/general/control/wisej.web.drageventargs#image), or [e.ImageSource](https://docs.wisej.com/api/wisej.web/general/control/wisej.web.drageventargs#imagesource) and [e.ImageSize](https://docs.wisej.com/api/wisej.web/general/control/wisej.web.drageventargs#imagesize) properties in any of the drag & drop events.

## Dropping Files

Another super cool feature in Wisej.NET (and only in Wisej.NET :star: ) is the ability to drag & drop any file(s) from your desktop onto any control.

You can check the files being dropped in the DragEnter event by retrieving the list of mime types (nothing else is available in the browser) being dropped from the data object using [DataFormats.FileDrop](https://docs.wisej.com/api/wisej.web/enumerations/wisej.web.dataformats) like this:

```csharp
private void label1_DragEnter(object sender, DragEventArgs e)
{
	var fileTypes = (string[])e.Data.GetData(DataFormats.FileDrop);
	if (fileTypes.Length > 0 && fileTypes[0]=="image/png")
		e.Effect = DragDropEffects.Move;
}
```

And finally retrieve the files being dropped simply by handling the DragDrop event and using [DataFormats.Files](https://docs.wisej.com/api/wisej.web/enumerations/wisej.web.dataformats) to receive an instance of the [HttpFileCollection ](https://docs.microsoft.com/en-us/dotnet/api/system.web.httpfilecollection?view=netframework-4.8)class:

```csharp
private void label1_DragDrop(object sender, DragEventArgs e)
{
	var data = (System.Web.HttpFileCollection)e.Data.GetData(DataFormats.Files);
	if (data.Count == 1)
	{
		this.label1.Text = "";
		this.label1.Image = Image.FromStream(data[0].InputStream);
	}
}
```

It's that simple.

{% embed url="<https://drive.google.com/file/d/1hasn58BzSKUD6YOKSQaEJVi24W7Vp2Dm/view>" %}

{% hint style="warning" %}
To enable dragging and dropping entire folders, enable the "allow\.drop.folders" option in Default.json: options:{"allow\.drop.folders": true}.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wisej.com/docs/controls/general/drag-and-drop-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.