Drag and drop

React Bootstrap 5 Drag and drop plugin

Drag and Drop plugin built with Bootstrap 5. Examples of draggable list, cards, tables, grid, buttons. Available sort, copy, scroll, disable, delay, nested & other options.

Note: Read the API tab to find all available options and advanced customization

Try out MDB Drag & Drop Builder


Draggable basic example

By using MDBDraggable component you can make your custom element draggable.

Drag me!


Custom container

If you want to have your draggable component in a container, add container property with the reference to your element.

Drag me!


Blocked axis

Thanks to blockXAxis property or blockYAxis property you can disable x or y axis.

Drag me!

Drag me!


Delay

You can set delay of starting dragging by adding delay property with miliseconds value.

Drag me after one second!


Disabled

You can set your draggable element as disabled by adding disabled property.

Disabled


Custom drag button

By adding dragHandle with the reference you can set drag handler of your element. Note that drag handler has to be inside an element.

Drag only on button!


Scrolling option

When your draggable element is inside a scrollable container your component will scroll its while you will be near the edge.

Drag!


Sortable basic example

By using MDBSortable you will make your list sortable. Note, only MDBSortableElement elements will be able to sort.

Item 1
Item 2
Item 3
Item 4
Item 5

Horizontal example

Sortable list will create no matter how rotated it is.

Item 1
Item 2
Item 3
Item 4
Item 5

Grid example

Sortable list works with grid as well.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Drag and drop - API


Import


        import { MDBDraggable, MDBSortable } from 'mdb-react-drag-and-drop';
      

Properties

MDBDraggable

Name Type Default Description Example
className String '' Add custom class to the MDBDraggable <MDBDraggable className="class" />
blockXAxis Boolean false Defines whether 'x' axis is blocked or not <MDBDraggable blockXAxis />
blockYAxis Boolean false Defines whether 'y' axis is blocked or not <MDBDraggable blockYAxis />
container Reference body Defines container of dragging element <MDBDraggable container={container} />
delay Number 0 Defines how long will deley exist before element starts to drag <MDBDraggable delay={500} />
disabled Boolean false Defines whether element is able to drag or not <MDBDraggable disabled />
dragHandle Reference null Defines drag handler of the element. Note, handler has to be inside of the dragging element <MDBDraggable dragHandle={dragElement} />
draggingClass String dragging Defines class which is using during dragging of the element <MDBDraggable draggingClass='test' />
scrollPixels Number 40 If container is scrollable, defines distance from edges where scrolling will begin <MDBDraggable scrollPixels={600} />
tag String 'div' Defines a tag type for the MDBDraggable <MDBDraggable tag='span' />

MDBSortable

Name Type Default Description Example
className String '' Add custom class to the MDBSortable <MDBSortable className="class" />
tag String 'div' Defines a tag type for the MDBSortable <MDBSortable tag='span' />