How Options work

This chapter explains how options work in ReDrop. Options are a critical part of the library, and understanding them thoroughly is essential for effective usage.

For detailed information on type definitions, default values, and explanations for each option in the draggable and droppable options objects, please refer to the Options Documentation.

Understanding Options

import { Redrop } from "redrop-dnd";

const dndManager = new Redrop();

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

As shown, the second argument in the makeDraggable() and makeDroppable() methods is used to pass options. Options are optional, and in the above example, we haven't defined any. Let’s define some options to understand this further:

import { Redrop } from "redrop-dnd";

const draggableOptions = {
  modifier: {
    cursor: {
      offset: {
        preset: "center",
      },
    },
  },
};

const dndManager = new Redrop({
  draggableOptions: {
    identifier: {
      type: "draggableItem",
    },
  },
  droppableOptions: {
    identifier: {
      type: {
        accept: ["draggableItem", "draggables"],
      },
    },
  },
});

const draggableItem = dndManager.makeDraggable("#draggableElm", draggableOptions);

Key Points About Options

1. Global vs. Local Options: ReDrop allows you to set global options when initializing the Redrop instance. These global options apply to all draggable and droppable elements unless overridden by local options provided in the makeDraggable() or makeDroppable() methods.

2. Default Options: If no options are set, ReDrop uses default options. You can refer to the Options Documentation for details on these defaults.

3. Selective Configuration: You don’t need to define all options explicitly. Only set the ones you need to customise, and ReDrop will use default values for the rest.

4. Option Hierarchy:

   • Global options apply to all elements for all the elements created with same instance.

   • Local options override global options for specific elements.

5. Identifiers: both draggable and droppable options have identifier options which you need to understand properly. It contains the following two properties

   • id: Each draggable or droppable element requires a unique id. If not provided, a default unique ID will be generated.

   • type: The type property links draggable and droppable elements. For example, if a draggable item has a type "draggableItem", the droppable options must include { accept: ["draggableItem", "draggables"] } to accept that draggable item. Multiple types can be included if required.

By leveraging these options effectively, you can customise the drag-and-drop behaviour of your application without the need to set every option manually.

I highly recommend you to please visit Options documentation to understand each options available with their explanation and default options.