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>

Custom drag button

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

Drag only on button!

<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"
      dragHandle=".draggable-drag-ico"
    >
      <i class="fas fa-arrows-alt draggable-drag-ico"></i>
      <p>Drag only on button!</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;
  }
  .draggable-drag-ico {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
    color: grey;
  }
</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.

Item 1
Item 2
Item 3
Item 4
Item 5
<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.

Item 1
Item 2
Item 3
Item 4
Item 5
<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.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
<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

Item 1
Item 2
Item 3
Item 4
Item 5
Disabled

Done

Item 6
Item 7
Item 8
Item 9
Item 10
<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

Item 1
Item 2
Item 3
Item 4
Item 5

Copy

Item 6
Item 7
Item 8
Item 9
Item 10
<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

1
2
3
4
5

Only odd numbers

7
<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

Item 1
Item 2
Item 3
Item 4
Item 5

Sorting not available

item 6
item 7
<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

Item 1
Item 2
Item 3
Item 4
Item 5

Done

item 6
item 7
item 8
item 9
<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>