makeDraggables()

This method makes one or more then one element draggable. 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 draggable you can access the on( eventname: DragEventName, callback: DragEventCallback) this method will allow you to add events on draggable element.

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

Definition:

makeDraggables(elements: NodeListOf<Element> | HTMLCollectionOf<Element> | string[] | string, options?: DraggableOptions): DraggableElements

Description: Makes multiple elements draggable with optional configuration settings.

Parameters:

• elements (NodeListOf<Element> | HTMLCollectionOf<Element> | string[] | string) - The elements or selectors to make draggable.

• options (DraggableOptions, optional) - Configuration options for draggable behavior.

Returns:

• DraggableElements - The elements made draggable. The returned array contains all the elements whic are made draggables. This array also have access to special method "on" which you can use to add events to all the draggables inside that array at once.

Example:

How to make elements draggable

// using a valid selector - ex: class, attribute selector, element selector etc
const draggableItems = redropInstance.makeDraggables('.items', draggableOptions);

// using array of selectors
const ElmSelectors = [".draggables", "#draggableItem", "[type='draggable']"]
const draggableItems = redropInstance.makeDraggables(ElmSelectors, draggableOptions);

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

How to add event to elements

const draggableItems = redropInstance.makeDraggables('.items', draggableOptions);

// using the on method you can attach events. 

// adding the same event to all the elements inside the array at once
draggableItems.on("dragstart", (
  event: PointerEvent,
  state: DndState,
  element: DraggableElement,
) => {
// perform any task here
})

// adding events to individual elements
draggableItems[0].on("dragstart", (
  event: PointerEvent,
  state: DndState,
  element: DraggableElement,
) => {
// perform any task here
})