Drag and drop
Vue Bootstrap 5 Drag and drop plugin
Drag and Drop plugin built with Bootstrap 5 and Vue 3. 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
Create draggable element with MDBDraggable
component.
Drag me!
<template>
<section
class="border p-4 d-flex justify-content-center mb-4"
style="height: 400px"
>
<MDBDraggable
class="draggable-element shadow-1-strong"
draggingClass="shadow-3-strong"
>
<p>Drag me!</p>
</MDBDraggable>
</section>
</template>
<script>
import { MDBDraggable } from "mdb-vue-drag-and-drop";
export default {
components: {
MDBDraggable
},
};
</script>
<script setup lang="ts">
import { MDBDraggable } from "mdb-vue-drag-and-drop";
</script>
<style>
.draggable-element {
display: flex;
width: 200px;
height: 200px;
justify-content: center;
align-items: center;
background-color: white;
}
</style>
Custom container
If you want to have your draggable component in a container, just add
container
property with selector to your component. .
Drag me!
<template>
<section
class="border p-4 mb-4"
style="height: 400px; overflow: hidden"
id="draggable-container"
>
<MDBDraggable
class="draggable-element shadow-1-strong"
draggingClass="shadow-3-strong"
container="#draggable-container"
>
<p>Drag me!</p>
</MDBDraggable>
</section>
</template>
<script>
import { MDBDraggable } from "mdb-vue-drag-and-drop";
export default {
components: {
MDBDraggable
},
};
</script>
<script setup lang="ts">
import { MDBDraggable } from "mdb-vue-drag-and-drop";
</script>
<style>
.draggable-element {
display: flex;
width: 200px;
height: 200px;
justify-content: center;
align-items: center;
background-color: white;
}
</style>
Blocked axis
Thanks to blockXAxis
property or
blockYAxis
property you can disable x or y axis. .
Drag me!
Drag me!
<template>
<section
class="border p-4 d-flex justify-content-center mb-4"
style="height: 400px; overflow: hidden"
id="draggable-container2"
>
<MDBDraggable
class="draggable-element shadow-1-strong"
draggingClass="shadow-3-strong"
container="#draggable-container2"
blockXAxis
>
<p>Drag me!</p>
</MDBDraggable>
<MDBDraggable
class="draggable-element shadow-1-strong"
draggingClass="shadow-3-strong"
container="#draggable-container2"
blockYAxis
>
<p>Drag me!</p>
</MDBDraggable>
</section>
</template>
<script>
import { MDBDraggable } from "mdb-vue-drag-and-drop";
export default {
components: {
MDBDraggable
},
};
</script>
<script setup lang="ts">
import { MDBDraggable } from "mdb-vue-drag-and-drop";
</script>
<style>
.draggable-element {
display: flex;
width: 200px;
height: 200px;
justify-content: center;
align-items: center;
background-color: white;
}
</style>
Delay
You can set delay of starting dragging by adding
delay
property with miliseconds value. .
Drag me after one second!
<template>
<section
class="border p-4 d-flex justify-content-center mb-4"
style="height: 400px"
>
<MDBDraggable
class="draggable-element shadow-1-strong"
draggingClass="shadow-3-strong"
:delay="1000"
>
<p>Drag me!</p>
</MDBDraggable>
</section>
</template>
<script>
import { MDBDraggable } from "mdb-vue-drag-and-drop";
export default {
components: {
MDBDraggable
},
};
</script>
<script setup lang="ts">
import { MDBDraggable } from "mdb-vue-drag-and-drop";
</script>
<style>
.draggable-element {
display: flex;
width: 200px;
height: 200px;
justify-content: center;
align-items: center;
background-color: white;
}
</style>
Disabled
You can set your draggable element as disabled by adding
disabled
property. .
Disabled
<template>
<section
class="border p-4 d-flex justify-content-center mb-4"
style="height: 400px"
>
<MDBDraggable class="draggable-element shadow-1-strong" disabled>
<p>Disabled</p>
</MDBDraggable>
</section>
</template>
<script>
import { MDBDraggable } from "mdb-vue-drag-and-drop";
export default {
components: {
MDBDraggable
},
};
</script>
<script setup lang="ts">
import { MDBDraggable } from "mdb-vue-drag-and-drop";
</script>
<style>
.draggable-element {
display: flex;
width: 200px;
height: 200px;
justify-content: center;
align-items: center;
background-color: white;
}
</style>
Scrolling option
When your draggable element is inside a scrollable container your component will scroll its while you will be near the edge.
Drag!
<template>
<section
class="border p-4 mb-4"
style="height: 400px; overflow: auto"
id="draggable-container6"
>
<div style="height: 800px; width: 2000px">
<MDBDraggable
class="draggable-element shadow-1-strong"
draggingClass="shadow-3-strong"
container="#draggable-container6"
>
<p>Drag me!</p>
</MDBDraggable>
</div>
</section>
</template>
<script>
import { MDBDraggable } from "mdb-vue-drag-and-drop";
export default {
components: {
MDBDraggable
},
};
</script>
<script setup lang="ts">
import { MDBDraggable } from "mdb-vue-drag-and-drop";
</script>
<style>
.draggable-element {
display: flex;
width: 200px;
height: 200px;
justify-content: center;
align-items: center;
background-color: white;
}
</style>
Sortable basic example
Make your list sortable with MDBSortable
component and
sortable items with MDBSortableItem
.
<template>
<MDBSortable>
<MDBSortableItem>Item 1</MDBSortableItem>
<MDBSortableItem>Item 2</MDBSortableItem>
<MDBSortableItem>Item 3</MDBSortableItem>
<MDBSortableItem>Item 4</MDBSortableItem>
<MDBSortableItem>Item 5</MDBSortableItem>
</MDBSortable>
</template>
<script>
import { MDBSortable, MDBSortableItem } from "mdb-vue-drag-and-drop";
export default {
components: {
MDBSortable,
MDBSortableItem
},
};
</script>
<script setup lang="ts">
import { MDBSortable, MDBSortableItem } from "mdb-vue-drag-and-drop";
</script>
<style>
.sortable-list {
width: 500px;
max-width: 100%;
border: solid 1px #ccc;
min-height: 60px;
display: block;
background: #fff;
border-radius: 4px;
}
.sortable-item {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
background: #fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
user-select: none;
}
</style>
Horizontal example
Sortable list will create no matter how rotated it is.
<template>
<MDBSortable classes="d-flex" id="sortable-horizontal">
<MDBSortableItem>Item 1</MDBSortableItem>
<MDBSortableItem>Item 2</MDBSortableItem>
<MDBSortableItem>Item 3</MDBSortableItem>
<MDBSortableItem>Item 4</MDBSortableItem>
<MDBSortableItem>Item 5</MDBSortableItem>
</MDBSortable>
</template>
<script>
import { MDBSortable, MDBSortableItem } from "mdb-vue-drag-and-drop";
export default {
components: {
MDBSortable,
MDBSortableItem
},
};
</script>
<script setup lang="ts">
import { MDBSortable, MDBSortableItem } from "mdb-vue-drag-and-drop";
</script>
<style>
.sortable-list {
width: 500px;
max-width: 100%;
border: solid 1px #ccc;
min-height: 60px;
display: block;
background: #fff;
border-radius: 4px;
}
.sortable-item {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
background: #fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
user-select: none;
}
#sortable-horizontal .sortable-item {
width: 100%;
border-bottom: none;
border-left: 1px solid #ccc;
border-end: 1px solid #ccc;
}
</style>
Grid example
Sortable list works with grid as well.
<template>
<MDBSortable classes="d-flex flex-wrap" id="sortable-grid">
<MDBSortableItem>Item 1</MDBSortableItem>
<MDBSortableItem>Item 2</MDBSortableItem>
<MDBSortableItem>Item 3</MDBSortableItem>
<MDBSortableItem>Item 4</MDBSortableItem>
<MDBSortableItem>Item 5</MDBSortableItem>
<MDBSortableItem>Item 6</MDBSortableItem>
<MDBSortableItem>Item 7</MDBSortableItem>
<MDBSortableItem>Item 8</MDBSortableItem>
<MDBSortableItem>Item 9</MDBSortableItem>
<MDBSortableItem>Item 10</MDBSortableItem>
<MDBSortableItem>Item 11</MDBSortableItem>
<MDBSortableItem>Item 12</MDBSortableItem>
</MDBSortable>
</template>
<script>
import { MDBSortable, MDBSortableItem } from "mdb-vue-drag-and-drop";
export default {
components: {
MDBSortable,
MDBSortableItem
},
};
</script>
<script setup lang="ts">
import { MDBSortable, MDBSortableItem } from "mdb-vue-drag-and-drop";
</script>
<style>
.sortable-list {
width: 500px;
max-width: 100%;
border: solid 1px #ccc;
min-height: 60px;
display: block;
background: #fff;
border-radius: 4px;
}
.sortable-item {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
background: #fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
user-select: none;
}
#sortable-grid .sortable-item {
width: 125px;
height: 125px;
margin: 15px;
display: flex;
justify-content: center;
border: 1px solid #ccc;
text-align: center;
}
</style>
Multiple tables
You can connect your list with other by passing its reference to the
connectedList
property.
To do
Done
<template>
<section class="p-4 d-flex justify-content-center w-100">
<MDBSortable
ref="sortableMultiTables1"
id="sortable-multi-tables-1"
:connectedList="sortableMultiTables2"
>
<h4 class="text-center pt-2">To do</h4>
<MDBSortableItem>Item 1</MDBSortableItem>
<MDBSortableItem>Item 2</MDBSortableItem>
<MDBSortableItem>Item 3</MDBSortableItem>
<MDBSortableItem>Item 4</MDBSortableItem>
<MDBSortableItem>Item 5</MDBSortableItem>
<MDBSortableItem disabled>Disabled</MDBSortableItem>
</MDBSortable>
<MDBSortable
ref="sortableMultiTables2"
id="sortable-multi-tables-2"
:connectedList="sortableMultiTables1"
>
<h4 class="text-center pt-2">Done</h4>
<MDBSortableItem>Item 6</MDBSortableItem>
<MDBSortableItem>Item 7</MDBSortableItem>
<MDBSortableItem>Item 8</MDBSortableItem>
<MDBSortableItem>Item 9</MDBSortableItem>
<MDBSortableItem>Item 10</MDBSortableItem>
</MDBSortable>
</section>
</template>
<script>
import { MDBSortable, MDBSortableItem } from "mdb-vue-drag-and-drop";
import { ref } from "vue";
export default {
components: {
MDBSortable,
MDBSortableItem
},
setup() {
const sortableMultiTables1 = ref(null);
const sortableMultiTables2 = ref(null);
return {
sortableMultiTables1,
sortableMultiTables2,
}
}
};
</script>
<script setup lang="ts">
import { MDBSortable, MDBSortableItem } from "mdb-vue-drag-and-drop";
import { ref } from "vue";
const sortableMultiTables1 = ref();
const sortableMultiTables2 = ref();
</script>
<style>
.sortable-list {
width: 500px;
max-width: 100%;
border: solid 1px #ccc;
min-height: 60px;
display: block;
background: #fff;
border-radius: 4px;
}
.sortable-item {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
background: #fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
user-select: none;
}
</style>
Coping items
By adding copy
property you can copy your items to
connected table.
Elements
Copy
<template>
<section class="p-4 d-flex justify-content-center w-100">
<MDBSortable
ref="sortableCopy1"
id="sortable-copy-1"
:connectedList="sortableCopy2"
:sorting="false"
copy
>
<h4 class="text-center pt-2">Element</h4>
<MDBSortableItem>Item 1</MDBSortableItem>
<MDBSortableItem>Item 2</MDBSortableItem>
<MDBSortableItem>Item 3</MDBSortableItem>
<MDBSortableItem>Item 4</MDBSortableItem>
<MDBSortableItem>Item 5</MDBSortableItem>
<MDBSortableItem>Item 11</MDBSortableItem>
</MDBSortable>
<MDBSortable
ref="sortableCopy2"
id="sortable-copy-2"
:connectedList="sortableCopy1"
>
<h4 class="text-center pt-2">Copy</h4>
<MDBSortableItem>Item 6</MDBSortableItem>
<MDBSortableItem>Item 7</MDBSortableItem>
<MDBSortableItem>Item 8</MDBSortableItem>
<MDBSortableItem>Item 9</MDBSortableItem>
<MDBSortableItem>Item 10</MDBSortableItem>
</MDBSortable>
</section>
</template>
<script>
import { MDBSortable, MDBSortableItem } from "mdb-vue-drag-and-drop";
import { ref } from "vue";
export default {
components: {
MDBSortable,
MDBSortableItem
},
setup() {
const sortableCopy1 = ref(null);
const sortableCopy2 = ref(null);
return {
sortableCopy1,
sortableCopy2,
}
}
};
</script>
<script setup lang="ts">
import { MDBSortable, MDBSortableItem } from "mdb-vue-drag-and-drop";
import { ref } from "vue";
const sortableCopy1 = ref();
const sortableCopy2 = ref();
</script>
<style>
.sortable-list {
width: 500px;
max-width: 100%;
border: solid 1px #ccc;
min-height: 60px;
display: block;
background: #fff;
border-radius: 4px;
}
.sortable-item {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
background: #fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
user-select: none;
}
</style>
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.
Numbers
Only odd numbers
<template>
<section class="p-4 d-flex justify-content-center w-100">
<MDBSortable
:enterPredicate="accessOddNumbers"
ref="sortableCondition1"
:connectedList="sortableCondition2"
id="sortable-condition-1"
>
<h4 class="text-center pt-2">Numbers</h4>
<MDBSortableItem :value="1">1</MDBSortableItem>
<MDBSortableItem :value="2">2</MDBSortableItem>
<MDBSortableItem :value="3">3</MDBSortableItem>
<MDBSortableItem :value="4">4</MDBSortableItem>
<MDBSortableItem :value="5">5</MDBSortableItem>
</MDBSortable>
<MDBSortable
ref="sortableCondition2"
:connectedList="sortableCondition1"
id="sortable-condition-2"
>
<h4 class="text-center pt-2">Only odd numbers</h4>
<MDBSortableItem :value="7">7</MDBSortableItem>
</MDBSortable>
</section>
</template>
<script>
import { MDBSortable, MDBSortableItem } from "mdb-vue-drag-and-drop";
import { ref } from "vue";
export default {
components: {
MDBSortable,
MDBSortableItem
},
setup() {
const sortableCondition1 = ref(null);
const sortableCondition2 = ref(null);
const accessOddNumbers = (value) => {
return parseInt(value) % 2;
};
return {
sortableCondition1,
sortableCondition2,
accessOddNumbers
}
}
};
</script>
<script setup lang="ts">
import { MDBSortable, MDBSortableItem } from "mdb-vue-drag-and-drop";
import { ref } from "vue";
const sortableCondition1 = ref();
const sortableCondition2 = ref();
const accessOddNumbers = (value: string) => {
return parseInt(value) % 2;
};
</script>
<style>
.sortable-list {
width: 500px;
max-width: 100%;
border: solid 1px #ccc;
min-height: 60px;
display: block;
background: #fff;
border-radius: 4px;
}
.sortable-item {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
background: #fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
user-select: none;
}
#sortable-condition-1,
#sortable-condition-2 {
width: 500px;
max-width: 100%;
border: solid 1px #ccc;
min-height: 60px;
display: block;
background: #fff;
border-radius: 4px;
}
</style>
Disabled sorting
By adding sorting
with false
value you can
disable sorting in table.
Sorting available
Sorting not available
<template>
<section class="p-4 d-flex justify-content-center w-100">
<MDBSortable
id="sortable-disabled-1"
ref="sortableDisabled1"
:connectedList="sortableDisabled2"
>
<h4 class="text-center pt-2">Sorting available</h4>
<MDBSortableItem>Item 1</MDBSortableItem>
<MDBSortableItem>Item 2</MDBSortableItem>
<MDBSortableItem>Item 3</MDBSortableItem>
<MDBSortableItem>Item 4</MDBSortableItem>
<MDBSortableItem>Item 5</MDBSortableItem>
</MDBSortable>
<MDBSortable
id="sortable-disabled-2"
ref="sortableDisabled2"
:connectedList="sortableDisabled1"
:sorting="false"
>
<h4 class="text-center pt-2">Sorting not available</h4>
<MDBSortableItem>item 6</MDBSortableItem>
<MDBSortableItem>item 7</MDBSortableItem>
</MDBSortable>
</section>
</template>
<script>
import { MDBSortable, MDBSortableItem } from "mdb-vue-drag-and-drop";
import { ref } from "vue";
export default {
components: {
MDBSortable,
MDBSortableItem
},
setup() {
const sortableDisabled1 = ref(null);
const sortableDisabled2 = ref(null);
return {
sortableDisabled1,
sortableDisabled2,
}
}
};
</script>
<script setup lang="ts">
import { MDBSortable, MDBSortableItem } from "mdb-vue-drag-and-drop";
import { ref } from "vue";
const sortableDisabled1 = ref();
const sortableDisabled2 = ref();
</script>
<style>
.sortable-list {
width: 500px;
max-width: 100%;
border: solid 1px #ccc;
min-height: 60px;
display: block;
background: #fff;
border-radius: 4px;
}
.sortable-item {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
background: #fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
user-select: none;
}
</style>
Nested
By adding itemClass
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
<template>
<section class="p-4 d-flex justify-content-center w-100">
<MDBSortable
id="sortable-multi-1-1"
classes="d-flex align-items-start"
itemClass="sortable-item-nested"
>
<MDBSortable
id="sortable-multi-2-2"
ref="sortableMulti1"
classes="sortable-item-nested"
:connectedList="sortableMulti2"
dragHandle=".drag-handler"
>
<h4 class="text-center pt-2 drag-handler">To do</h4>
<MDBSortableItem>Item 1</MDBSortableItem>
<MDBSortableItem>Item 2</MDBSortableItem>
<MDBSortableItem>Item 3</MDBSortableItem>
<MDBSortableItem>Item 4</MDBSortableItem>
<MDBSortableItem>Item 5</MDBSortableItem>
</MDBSortable>
<MDBSortable
id="sortable-multi-2-1"
ref="sortableMulti2"
classes="sortable-item-nested"
:connectedList="sortableMulti1"
dragHandle=".drag-handler"
>
<h4 class="text-center pt-2 drag-handler">Done</h4>
<MDBSortableItem>item 6</MDBSortableItem>
<MDBSortableItem>item 7</MDBSortableItem>
<MDBSortableItem>item 8</MDBSortableItem>
<MDBSortableItem>item 9</MDBSortableItem>
</MDBSortable>
</MDBSortable>
</section>
</template>
<script>
import { MDBSortable, MDBSortableItem } from "mdb-vue-drag-and-drop";
import { ref } from "vue";
export default {
components: {
MDBSortable,
MDBSortableItem
},
setup() {
const sortableMulti1 = ref(null);
const sortableMulti2 = ref(null);
return {
sortableMulti1,
sortableMulti2,
}
}
};
</script>
<script setup lang="ts">
import { MDBSortable, MDBSortableItem } from "mdb-vue-drag-and-drop";
import { ref } from "vue";
const sortableMulti1 = ref();
const sortableMulti2 = ref();
</script>
<style>
.sortable-list {
width: 500px;
max-width: 100%;
border: solid 1px #ccc;
min-height: 60px;
display: block;
background: #fff;
border-radius: 4px;
}
.sortable-item {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
background: #fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
user-select: none;
}
</style>
Drag and drop - API
Import
<script>
import {
MDBDraggable,
MDBSortable,
MDBSortableItem
} from "mdb-vue-drag-and-drop";
</script>
Properties
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 |
tag
|
Stering | 'div' |
Defines element tag |
Sortable
Name | Type | Default | Description |
---|---|---|---|
animationDuration
|
Number | 300 |
Defines duration of sliding and returning animations |
blockXAxis
|
Boolean | false |
Defines whether 'x' axis is blocked or not |
blockYAxis
|
Boolean | false |
Defines whether 'y' axis is blocked or not |
classes
|
String | '' |
Defines custom classes for sortable list wrapper |
connectedList
|
Ref element | 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 |
dragHandle
|
String | '' |
Defines drag handler of the element for nested lists. Note, handler has to be inside of the dragging element |
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 |
tag
|
Stering | 'div' |
Defines element tag |
Sortable Item
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 |
disabled
|
Boolean | false |
Defines whether element is allowed to drag or not |
classes
|
String | '' |
Defines custom classes for sortable list wrapper |
dragHandle
|
String | '' |
Defines drag handler of the element. Note, handler has to be inside of the dragging element |
itemClass
|
String | sortable-item |
Defines class name for sortable items. |
value
|
String , Number |
|
Defines custom value for access between lists |
tag
|
Stering | 'div' |
Defines element tag |
Methods
Draggable
Name | Description |
---|---|
resetPosition |
Return original position of the element |
<template>
<section
class="border p-4 d-flex justify-content-center mb-4"
style="height: 400px"
>
<MDBDraggable
class="draggable-element shadow-1-strong"
draggingClass="shadow-3-strong"
ref="draggableRef"
>
<p>Drag me!</p>
</MDBDraggable>
</section>
<div><MDBBtn @click="resetPosition">Reset position</MDBBtn></div>
</template>
<script>
import {
MDBDraggable,
} from "mdb-vue-drag-and-drop";
import {
MDBBtn
} from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBDraggable,
MDBBtn,
},
setup() {
const draggableRef = ref(null);
const resetPosition = () => draggableRef.value.resetPosition();
return {
draggableRef,
resetPosition
};
},
};
</script>
<script setup lang="ts">
import {
MDBDraggable,
} from "mdb-vue-drag-and-drop";
import {
MDBBtn
} from "mdb-vue-ui-kit";
import { ref } from "vue";
const draggableRef = ref<InstanceType<typeof MDBDraggable> | null>(null);
const resetPosition = () => draggableRef.value?.resetPosition();
</script>
Sortable
Name | Description |
---|---|
addItem |
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. |
<template>
<section class="border p-4 d-flex justify-content-center mb-4">
<MDBSortable ref="sortableRef">
<MDBSortableItem v-for="item in list" :key="item.id">{{
item.name
}}</MDBSortableItem>
</MDBSortable>
<div><MDBBtn @click="addElement">Add</MDBBtn></div>
</section>
</template>
<script>
import {
MDBSortable,
MDBSortableItem
} from "mdb-vue-drag-and-drop";
import {
MDBBtn
} from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSortable,
MDBSortableItem
MDBBtn,
},
setup() {
const list = ref([
{ id: 0, name: "name 0" },
{ id: 1, name: "name 1" },
{ id: 2, name: "name 2" },
{ id: 3, name: "name 3" },
]);
const sortableRef = ref(null);
const addElement = () => {
const item = document.createElement("div");
item.textContent = "added " + new Date().getMilliseconds();
item.className = "sortable-item";
sortableRef.value.addItem(item);
};
return {
list,
sortableRef,
addElement
};
},
};
</script>
<script setup lang="ts">
import {
MDBSortable,
MDBSortableItem
} from "mdb-vue-drag-and-drop";
import {
MDBBtn
} from "mdb-vue-ui-kit";
import { ref } from "vue";
const stepperRef = ref(null);
const list = ref([
{ id: 0, name: "name 0" },
{ id: 1, name: "name 1" },
{ id: 2, name: "name 2" },
{ id: 3, name: "name 3" },
]);
const sortableRef = ref<InstanceType<typeof MDBSortable> | null>(null);
const addElement = () => {
const item = document.createElement("div");
item.textContent = "added " + new Date().getMilliseconds();
item.className = "sortable-item";
sortableRef.value?.addItem(item);
};
</script>
Events
Draggable
Name | Description |
---|---|
start
|
Emitted when an element is started dragging |
end
|
Emitted when an element is ended dragging |
move
|
Emitted when an element is dragging |
<template>
<section
class="border p-4 d-flex justify-content-center mb-4"
style="height: 400px"
>
<MDBDraggable
class="draggable-element shadow-1-strong"
draggingClass="shadow-3-strong"
@start="doSomething"
>
<p>Drag me!</p>
</MDBDraggable>
</section>
</template>
Sortable
Name | Description |
---|---|
move
|
Emitted when one of the itmes from list changed its position. |
exit
|
Emitted when one of the items from list will enter to connected table. |
start
|
Emitted when one of the items from list is dragged. |
end
|
Emitted when dragging one of the items from list have been ended. A new structure of list is available with HTML node which is property of the event. |
<template>
<MDBSortable @move="doSomething">...</MDBSortable>
</template>