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.

Please check Events Types for more information about draggable and droppable methods

Definition:

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

// 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

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
})