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
Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.
Draggable basic example
Make an element draggable by adding the data-mdb-draggable-init
attribute to the element with the
class .draggable-element
.
Drag me!
Custom container
Disable the x-axis or y-axis by adding the data-mdb-block-x-axis
or
data-mdb-block-y-axis
attribute, respectively.
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
Set the delay for starting dragging by adding the data-mdb-delay
attribute with a value in milliseconds.
Drag me after one second!
Disabled
You can set your draggable element as disabled by adding
data-mdb-disabled
with true
value.
Disabled
Scrolling option
When your draggable element is inside a scrollable container, the container will scroll when you approach its edge.
Drag!
Sortable basic example
Make your list sortable by adding the data-mdb-sortable
attribute with a value of sortable
. Note that only
elements with the data-mdb-sortable-init
attribute will be able to be sorted.
Horizontal example
A sortable list will work with any element configuration or direction, as it is not limited to a vertical layout.
Grid example
Sortable can also be implemented with the grid layout.
Multiple tables
Connect your list with others by adding the data-mdb-connected-list
attribute. Note that you need to
set the value as a selector when initializing your component via data attributes.
To do
Done
Coping items
By adding data-mdb-copy
with value true
you can copy your items to
connected table.
Elements
Copy
Conditions
Customize the conditions for permitting the sending or copying of items to a connected table by adding your
custom function that return true
or false
to the enterPredicate
property.
It's important to note that you can only initialize this via JavaScript.
Numbers
Only odd numbers
Disabled sorting
To disable sorting in a table, add the data-mdb-sorting
attribute with a value of false
.
Sorting available
Sorting not available
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
Done
Drag and drop - API
Import
Usage
Via data attributes
Using the Drag And Drop plugin doesn't require any additional JavaScript code - simply add
data-mdb-draggable-init
attribute to
.draggable-element
and data-mdb-sortable-init
attribute to sortable-list
and use other data attributes to set all options.
Via JavaScript
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-mdb-
, as in data-mdb-delay=""
.
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 delay exist before element starts to drag |
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 | String | null | 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
dispose
|
- | Removes draggable instance. |
instanceDraggable.dispose()
|
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) |
Sortable
dispose
|
- | Removes sortable instance. |
instanceSortable.dispose()
|
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.addItem(el, 2)
|
getInstance |
element | Static method which allows you to get the sortable instance associated to a DOM element. | Sortable.getInstance(sortableElement) |
removeItem |
id | Removes element from the sortable list. You pass element id as an argument. |
instanceSortable.removeItem(id) |
Events
Draggable
Name | Description |
---|---|
start.mdb.draggable
|
Emitted when an element is started dragging. |
end.mdb.draggable
|
Emitted when an element is ended dragging. |
itemMove.mdb.draggable
|
Emitted when an element is dragging. |
Sortable
Name | Description |
---|---|
itemMove.mdb.sortable
|
Emitted when one of the items from list changed its position. |
listChange.mdb.sortable
|
Emitted when one of the items from list will enter to connected table. |