Basic Usage

In This chapter we will understand the following things

• How to create a instance of Redrop (dndManager)

• How to make elements draggable and droppable

• How to attach drag and drop events

This chapter will help you understand how to setup drag and drop using ReDrop and add multiple events like "dragstart", "dragenter", "drop" with different drag and drop options.

Instance of ReDrop Class ( dndManager )

ReDrop is built using a class which means invoking it will return you a instance of Redrop class with all the methods attached to it. This instance returned will be used to create droppable and draggable element and perform all the drag and drop actions like attaching events etc.

Lets see first how can we create a instance of ReDrop.

The below code creates an instance that you can use to manage draggable and droppable elements. It’s essential to understand that this instance acts as a drag-and-drop manager, providing access to all the public methods of the Redrop class.

If needed, you can create multiple instances of Redrop to handle separate drag-and-drop systems within your application. However, keep in mind that each instance will attach its own global and local event listeners to manage drag-and-drop functionality. In most cases, a single drag-and-drop manager is sufficient to handle all the drag-and-drop interactions in your application efficiently.

import { Redrop } from "redrop-dnd"

const dndManager = new Redrop()

I like to call the instance as dndManager as it serve as a drag and drop manager and help us create elements draggable and droppable.

Using this instance now we can make one or more then one element draggable or droppable

How to make elements draggable and droppable

ReDrop simplifies making elements draggable and droppable, offering an easier alternative to the native HTML5 drag-and-drop API. With native drag-and-drop, you need to manually set the draggable attribute to true, attach a dragStart event for draggable elements, and dragOver and drop events for droppable elements. In ReDrop, the process is more streamlined.

Using ReDrop, elements can be made draggable or droppable with the makeDraggable() or makeDroppable() methods for single elements, or makeDraggables() and makeDroppables() for multiple elements. We’ll explore these methods shortly, but first, let’s cover some key concepts.

In traditional drag-and-drop, you must handle attributes, events, and state management manually. ReDrop handles all of this for you, requiring only that you configure options to enable or disable features for draggable or droppable elements.

In ReDrop, elements are treated as items. Each draggable or droppable element is an independent item with its own events and options. For droppable zones, items can accept or reject others based on matching types. Each item also maintains its state and can be customised to control its behaviour.

Now, let’s quickly see how to make elements draggable and droppable!

import { Redrop } from "redrop-dnd"

const dndManager = new Redrop()

// making a single element draggable or droppable
const draggableItem = dndManager.makeDraggable("#draggableElm", draggableOptions)
const droppableItem = dndManager.makeDroppable("#dropzone", droppableOptions)

// making multiple elements draggable and droppables
const draggables = dndManager.makeDraggables(".draggable", draggableOptions)
const droppables = dndManager.makeDroppables(".dropzone", droppableOptions)

That’s all it takes to make an element draggable or droppable! In the next section, we’ll explore how to add events to these elements, but first, let’s clarify a few more details.

The makeDraggable()/makeDraggables() and makeDroppable()/makeDroppables() methods accept either a string selector or a direct reference to an element. This means you don’t need to manually select an element using methods like getElementById or querySelector; you can simply pass a valid selector as a string, and the element will automatically be selected and made draggable or droppable.

Additionally, these methods accept a second parameter for draggable or droppable options, which allow you to customise and control the drag-and-drop behaviour. We’ll dive deeper into these options in an upcoming chapter, as understanding them is crucial for effectively using ReDrop.

When elements are made draggable or droppable, the methods return the element(s) with a special on() method attached. This method makes it easy to add events to your draggable and droppable elements, which we’ll cover in detail in the next section.

Attaching Drag and Drop Events

As mentioned earlier, when elements are made draggable or droppable, a special on() method is attached to them. This method allows you to easily add drag-and-drop events to those elements.

Here’s an example:

import { Redrop } from "redrop-dnd";

const dndManager = new Redrop();

const draggableItem = dndManager.makeDraggable("#draggableElm", draggableOptions);
const droppableItem = dndManager.makeDroppable("#dropzone", droppableOptions);

draggableItem.on("dragstart", (event, state, element) => {
  const data = "Your custom data (string, object, etc.)";
  dndManager.setData(data, element);
});

droppableItem.on("drop", (event, state, element, sortedIndex) => {
  const data = state?.data;
  console.log(data);
});

Understanding the on() Method

The on() method takes two parameters:

1. Event Name: The name of the event to attach (e.g., "dragstart", "drop").

2. Callback Function: The function to execute when the event is triggered.

Supported Events

• Draggable Elements: "drag", "dragstart", "dragend"

  • The callback does not include the sortedIndex argument.

• Droppable Elements: "dragenter", "dragleave", "dragover", "drop"

  • For drop events, the callback includes the sortedIndex argument if sorting is enabled.

Callback Function Type Definitions

Drag Event Callback

typescriptCopy codetype DragEventCallback = (
  event: PointerEvent,
  state: DndState,
  element: DraggableElement,
) => void;

Drop Event Callback

typescriptCopy codetype DropEventCallback = (
  event: PointerEvent,
  state: DndState,
  element: DroppableElement,
  sortedIndex?: number | null,
) => void;

Explanation of Arguments

• event: A PointerEvent providing control over drag-and-drop operations.

• state: Contains the state for both drag and drop elements. Refer to the DND State documentation for details.

• element: The element the on() method is attached to. For draggable elements, it’s the draggable item; for droppable elements, it’s the dropzone.

• sortedIndex: Available only for drop events (if sorting is enabled), this indicates the index position where the element is dropped, which can be used with the transferElm method to move elements.

By using this simple structure, you can easily attach and manage events for your drag-and-drop elements.

In the next chapter we will understand how can we use options.