# makeDroppable()

This method makes an element droppable. 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 droppable you can access the `on( eventname: DropEventName, callback: DropEventCallback)`  this method will allow you to add events on your droppable element.

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



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

`makeDroppable(element: Element | string | null, options?: DroppableOptions): DroppableElement`

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

**Parameters:**

* **`element`** (`Element | string | null`) - The element or selector to make droppable.
* **`options`** (`DroppableOptions`, optional) - Configuration options for droppable behavior.

**Returns:**

* **`DroppableElement`** - The element made droppable.

**Example:**

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

// using class, id or any valid selector
const droppable = redropInstance.makeDroppable('#dropzone1', droppableOptions);

// using element reference 
const element = document.getElementById("#dropzone")
const droppableItem = redropInstance.makeDroppable(element, droppableOptions);
```
