# Basic Usage

In This chapter we will understand the following things

* [How to create a instance of Redrop (dndManager)](#instance-of-redrop-class-dndmanager)
* [How to make elements draggable and droppable ](#how-to-make-elements-draggable-and-droppable)
* [How to attach drag and drop events](#attaching-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](../../api-docs/redrop/class-redrop) which means invoking it will return you a instance of [Redrop class](../../api-docs/redrop/class-redrop) with all the  [methods](../../api-docs/redrop) 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.

{% hint style="info" %}
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](../../../api-docs/redrop#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.
{% endhint %}

```typescript
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](https://developer.mozilla.org/en-US/docs/Web/API/HTML_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()`](../../api-docs/redrop/makedraggable) or [`makeDroppable()`](../../api-docs/redrop/makedroppable) methods for single elements, or [`makeDraggables()`](../../api-docs/redrop/makedraggables) and [`makeDroppables()`](../../api-docs/redrop/makedroppables) for multiple elements. We’ll explore these methods shortly, but first, let’s cover some key concepts.

{% hint style="info" %}
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.
{% endhint %}

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

```typescript
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()`](../../api-docs/redrop/makedraggable)`/`[`makeDraggables()`](../../api-docs/redrop/makedraggables) and [`makeDroppable()`](../../api-docs/redrop/makedroppable)`/`[`makeDroppables()`](../../api-docs/redrop/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](../../api-docs/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()`](#understanding-the-on-method) 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()`](#understanding-the-on-method) method is attached to them. This method allows you to easily add drag-and-drop events to those elements.

Here’s an example:

```javascript
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**

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

**Drop Event Callback**

```typescript
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_ ](../../api-docs/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`](../utility-functions#transfer-element) 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.
