# makeDroppables()

This method makes one or more then one element droppable at once. You can directly pass the element reference as array or you can also pass a string value which can be any valid selector accepted by querySelectorAll("").

Once the elements are made dropapble you can access the `on( eventname: DropEventName, callback: DropEventCallback)`  this method will allow you to add events on 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;

`makeDroppables(elements: NodeListOf<Element> | HTMLCollectionOf<Element> | string[] | string, options?: DroppableOptions): DroppableElements`

_Description:_ Makes multiple elements droppable with optional configuration settings.

**Parameters:**

* **`elements`** (`NodeListOf<Element> | HTMLCollectionOf<Element> | string[] | string`) - The elements or selectors to make droppable.
* **`options`** (`DroppableOptions`, optional) - Configuration options for droppable behavior.

**Returns:**

* **`DroppableElements`** - The elements made droppable.

**Example:**

How to make elements droppables

```typescript

// using a valid selector - ex: class, attribute selector, element selector etc
const droppableItems = redropInstance.makeDroppables('.dropzone', droppableOptions);

// using array of selectors
const ElmSelectors = [".droppables", "#dropzone", "[type='dropzone']"]
const droppableItems = redropInstance.makeDroppables(ElmSelectors, droppableOptions);

// Similar way if you have a list of element like NodeList or HTMLCollection 
// you can directly pass it as the first argument
const droppableItems = redropInstance.makeDroppables(NodeList, droppableOptions);

```

How to add event to elements

```typescript

const droppableItems = redropInstance.makeDroppables('.items', droppableOptions);

// using the on method you can attach events. 

// adding the same event to all the elements inside the array at once
droppableItems.on("drop", (
  event: PointerEvent,
  state: DndState,
  element: DroppableElement,
  sortedIndex?: number | null,
) => {
// perform any task here
})

// adding events to individual elements
droppableItems[0].on("dragstart", (
  event: PointerEvent,
  state: DndState,
  element: DroppableElement,
  sortedIndex?: number | null,
) => {
// perform any task here
})
```
