# makeDraggable()

This method makes an element draggable. You can directly pass the element reference or you can also a string value which can be any valid selector accepted by querySelector("").

Once the element is made draggable you can access the `on( eventname: DragEventName, callback: DragEventCallback)`  this method will allow you to add event on your draggable element.

{% hint style="info" %}
Please check [#events-types](../../type-definitions#events-types "mention") for more information about draggable and droppable methods
{% endhint %}



#### **Definition:**&#x20;

`makeDraggable(element: Element | string | null, options?: DraggableOptions): DraggableElement`

_Description:_ Makes an element draggable with optional configuration settings.

**Parameters:**

* **`element`** (`Element | string | null`) - The element or selector to make draggable.
* **`options`** (`DraggableOptions`, optional) - Configuration options for draggable behaviour.

**Returns:**

* **`DraggableElement`** - The element made draggable with a special "on" method attach with it.&#x20;

**Example:**

```typescript
// different ways to make a element draggable

// using class, id or any valid selector
const draggableItem = redropInstance.makeDraggable('#item1', draggableOptions);

// using element reference 
const element = document.getElementById("#item1")
const draggableItem = redropInstance.makeDraggable(element, draggableOptions);
```
