Drag and drop

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

MDB 5 - Bootstrap 5 & Material Design 2.0

Draggable basic example

By adding draggable-element class name you can make your custom element draggable.

Drag me!

Custom container

If you want to have your draggable component in a container, just add data-mdb-container attribute with selector to your component.

Drag me!

Blocked axis

Thanks to data-mdb-block-x-axis attribute or data-mdb-block-y-axis attribute you can disable x or y axis.

Drag me!

Drag me!

Delay

You can set deley of starting dragging by adding data-mdb-delay attribute with miliseconds value.

Drag me after one second!

Disabled

You can set your draggable element as disabled by adding data-mdb-disabled with true value.

Disabled

Custom drag button

By adding data-mdb-drag-handle with selector 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 adding data-mdb-sortable with sortable value to your list, you will make its sortable. Note, only elements with sortable-item class name 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

Multiple tables

By adding data-mdb-connected-list attribute you can connect your list with other. Note, you has to set value as selector when you initialize your component via data attributes.

To do

Item 1
Item 2
Item 3
Item 4
Item 5
Disabled

Done

Item 6
Item 7
Item 8
Item 9
Item 10

Coping items

By adding data-mdb-copy with value true you can copy your items to connected table.

Elements

Item 1
Item 2
Item 3
Item 4
Item 5

Copy

Item 6
Item 7
Item 8
Item 9
Item 10

Conditions

You can set your own conditions about permission to sending or coping items to connected table by adding your custom function with true / false return to enterPredicate property. Note, you can only initialize it via JavaScript.

Numbers

1
2
3
4
5

Only odd numbers

7

Disabled sorting

By adding data-mdb-sorting with false value you can disable sorting in table.

Sorting available

Item 1
Item 2
Item 3
Item 4
Item 5

Sorting not available

item 6
item 7

Nested

By adding data-mdb-item-class you can set what class has to be in your list item to make them sortable. Thanks to that you can make nested lists.

To do

Item 1
Item 2
Item 3
Item 4
Item 5

Done

item 6
item 7
item 8
item 9

Drag and drop - API

Usage

Via data attributes


                      <!-- Draggable -->
                      <div class="draggable-element"></div>

                      <!-- Sortable -->
                      <div data-mdb-sortable="sortable">
                        <div class="sortable-item">Item 1</div>
                        <div class="sortable-item">Item 2</div>
                        <div class="sortable-item">Item 3</div>
                        <div class="sortable-item">Item 4</div>
                        <div class="sortable-item">Item 5</div>
                      </div>

Via JavaScript


                    // Draggable
                    const draggableEl = document.getElementById('draggable');
                    const instanceDraggable = new DragAndDrop.Draggable(draggableEl, {
                      ...options,
                    });

                    // Sortable
                    const sortableEl = document.getElementById('sortable');
                    const instanceSortable = new DragAndDrop.Sortable(sortableCondition1, {
                      ...options
                    });

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own. 


                    // Draggable
                    $('#draggable').Draggable();

                    // Sortable
                    $('#sortable').Sortable();

Options

Options can be passed via data attributes, JavaScript, or jQuery. For data attributes, append the option name to data-mdb-, as in data-mdb-zoom-level="". The img and caption attributes should be pinned directly to the thumbnails, not to the lightbox wrapper element.

Draggable

Name Type Default Description
blockXAxis Boolean false Defines whether 'x' axis is blocked or not
blockYAxis Boolean false Defines whether 'y' axis is blocked or not
container String body Defines container of dragging element
delay Number 0 Defines how long will deley exist before element starts to drag
disabled Boolean false Defines whether element is able to drag or not
disabled Boolean false Defines whether element is able to drag or not
dragHandle String '' Defines drag handler of the element. Note, handler has to be inside of the dragging element
draggingClass String dragging Defines class which is using during dragging of the element
scrollPixels Number 40 If container is scrollable, defines distance from edges where scrolling will begin

Sortable

Name Type Default Description
animationDuration Number 300 Defines duration of sliding and returning animations
connectedList Element / Null / String' null Defines list which you want to connect with
copy Boolean false Defines whether you want to copy elements from one list to another or send them instead
enterPredicate Function () => true Defines function which check access between tables
itemClass String sortable-item Defines class name for sortable items.
sorting Boolean true Defines whether list is able to sort or not

Methods

Draggable

resetPosition - Return original position of the element instanceDraggable.resetPosition()
getInstance element Static method which allows you to get the draggable instance associated to a DOM element. Draggable.getInstance(draggableElement) 

                      const draggableElement = document.getElementById('draggable');
                      const instanceDraggable = Draggable.getInstance(draggableElement);
                      instanceDraggable.resetPosition();

Sortable

addItem element, index Adds element to the sortable list. You can set position in the list of your new item by adding index number. Note: If you did not insert an index number, your element would append at the end of the list. instanceSortable.addIem(el, 2)
getInstance element Static method which allows you to get the sortable instance associated to a DOM element. Sortable.getInstance(sortableElement) 

                      const newElement = document.createElement('div');
                      newElement.classList.add('sortable-item');
                      newElement.textContent = 'New Element';

                      const sortableElement = document.getElementById('sortable');
                      const instanceSortable = Sortable.getInstance(sortableElement);
                      instanceSortable.addIem(newElement);

Events

Draggable

Name Description
start.mdb.draggable Emitted when an element is started dragging
end.mdb.draggable Emitted when an element is ended dragging
move.mdb.draggable Emitted when an element is dragging 

                      const draggableItem = document.getElementById('dragging');
                      draggableItem.addEventListener('start.mdb.draggable', () => alert('Start dragging'));

Sortable

Name Description
move.mdb.sortable Emitted when one of the itmes from list changed its position.
exit.mdb.sortable Emitted when one of the items from list will enter to connected table. 

                      const sortableItem = document.getElementById('sortable-item-1');
                      sortableItem.addEventListener('move.mdb.sortable', (e) => alert(e.target));

Import

DRAG AND DROP also works with module bundlers. Use the following code to import this component: 


                      import { Draggable, Sortable } from 'mdb-drag-and-drop';