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

Draggable basic example

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

Drag me!

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

export default function App() {
  return (
    <MDBDraggable className='shadow-1-strong' draggingClass='shadow-3-strong'>
      <p>Drag element</p>
    </MDBDraggable>
  );
}

Custom container

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

Drag me!

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

export default function App() {
  const containerElement = useRef(null);

  return (
    <section ref={containerElement} className='border p-4 mb-4' style={{ height: '400px', overflow: 'hidden' }}>
      <MDBDraggable className='shadow-1-strong' draggingClass='shadow-3-strong' container={containerElement}>
        <p>Drag element</p>
      </MDBDraggable>
    </section>
  );
}

Blocked axis

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

Drag me!

Drag me!

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

export default function App() {
  const blockedElement = useRef(null);

  return (
    <section
      ref={blockedElement}
      className='border p-4 d-flex justify-content-center mb-4'
      style={{ height: '400px', overflow: 'hidden' }}
    >
      <MDBDraggable
        blockXAxis
        className='shadow-1-strong'
        draggingClass='shadow-3-strong'
        container={blockedElement}
      >
        <p>Drag element</p>
      </MDBDraggable>

      <MDBDraggable
        blockYAxis
        className='shadow-1-strong'
        draggingClass='shadow-3-strong'
        container={blockedElement}
      >
        <p>Drag element</p>
      </MDBDraggable>
    </section>
  );
}

Delay

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

Drag me after one second!

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

export default function App() {
  return (
    <MDBDraggable delay={1000} className='shadow-1-strong' draggingClass='shadow-3-strong'>
      <p>Drag element</p>
    </MDBDraggable>
  );
}

Disabled

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

Disabled

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

export default function App() {
  return (
    <MDBDraggable disabled className='shadow-1-strong' draggingClass='shadow-3-strong'>
      <p>Drag element</p>
    </MDBDraggable>
  );
}

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!

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

export default function App() {
  const customDrag = useRef(null);

  return (
    <MDBDraggable dragHandle={customDrag} className='shadow-1-strong' draggingClass='shadow-3-strong'>
      <i className='fas fa-arrows-alt draggable-drag-ico draggable-cursor-grab' ref={customDrag} />
      <p>Drag only on button!</p>
    </MDBDraggable>
  );
}

Scrolling option

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

Drag!

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

export default function App() {
  const scrollableElement = useRef(null);

  return (
    <section ref={scrollableElement} className='border p-4 mb-4' style={{ height: '400px', overflow: 'auto' }}>
      <MDBDraggable className='shadow-1-strong' draggingClass='shadow-3-strong' container={scrollableElement}>
        <p>Drag!</p>
      </MDBDraggable>

      <div style={{ height: '800px', width: '2000px' }}></div>
    </section>
  );
}

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
import React from 'react';
import { MDBSortable, MDBSortableElement } from 'mdb-react-drag-and-drop';

export default function App() {
  return (
    <MDBSortable>
      <MDBSortableElement>Item 1</MDBSortableElement>
      <MDBSortableElement>Item 2</MDBSortableElement>
      <MDBSortableElement>Item 3</MDBSortableElement>
      <MDBSortableElement>Item 4</MDBSortableElement>
      <MDBSortableElement>Item 5</MDBSortableElement>
    </MDBSortable>
  );
}

Horizontal example

Sortable list will create no matter how rotated it is.

Item 1
Item 2
Item 3
Item 4
Item 5
import React from 'react';
import { MDBSortable, MDBSortableElement } from 'mdb-react-drag-and-drop';

export default function App() {
  return (
    <MDBSortable id='sortable-horizontal' className='d-flex'>
      <MDBSortableElement>Item 1</MDBSortableElement>
      <MDBSortableElement>Item 2</MDBSortableElement>
      <MDBSortableElement>Item 3</MDBSortableElement>
      <MDBSortableElement>Item 4</MDBSortableElement>
      <MDBSortableElement>Item 5</MDBSortableElement>
    </MDBSortable>
  );
}

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
import React from 'react';
import { MDBSortable, MDBSortableElement } from 'mdb-react-drag-and-drop';

export default function App() {
  return (
    <MDBSortable id='sortable-grid' className='d-flex flex-wrap'>
      <MDBSortableElement>Item 1</MDBSortableElement>
      <MDBSortableElement>Item 2</MDBSortableElement>
      <MDBSortableElement>Item 3</MDBSortableElement>
      <MDBSortableElement>Item 4</MDBSortableElement>
      <MDBSortableElement>Item 5</MDBSortableElement>
      <MDBSortableElement>Item 6</MDBSortableElement>
      <MDBSortableElement>Item 7</MDBSortableElement>
      <MDBSortableElement>Item 8</MDBSortableElement>
      <MDBSortableElement>Item 9</MDBSortableElement>
      <MDBSortableElement>Item 10</MDBSortableElement>
      <MDBSortableElement>Item 11</MDBSortableElement>
      <MDBSortableElement>Item 12</MDBSortableElement>
    </MDBSortable>
  );
}
#sortable-grid .sortable-item {
  width: 125px;
  height: 125px;
  margin: 15px;
  display: flex;
  justify-content: center;
  border: 1px solid #ccc;
  text-align: center;
}

Drag and drop - API

Import

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

Properties

MDBDraggable

Name Type Default Description Example
className string '' Adds a 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 React.RefObject<any> 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 React.RefObject<any> 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' />