vue-draggable-plus: A Drag‑and‑Drop Component Library for Vue 2.7 and Vue 3

In this article the author introduces vue-draggable-plus, a drag‑and‑drop component library for Vue that works with both Vue 2.7 and Vue 3, built on top of Sortablejs.

Sortablejs is a powerful JavaScript drag‑and‑drop library that provides Vue components such as vue-draggable and vue-draggable-next, but the latter has not been updated for recent Vue 3 releases.

vue-draggable-plus continues the core ideas of vue-draggable, offering a Vue component, a functional API, and a directive API for easy integration, supporting two‑way data binding, cloning, animation, and custom ghost classes.

Installation is as simple as running npm install vue-draggable-plus.

<code style="padding: 16px; color: black; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px">npm install vue-draggable-plus</code>

Usage examples are provided for the three modes:

Component usage – a <VueDraggable> component with v-model, animation, ghostClass, and event listeners.

Functional usage – using the useDraggable composable with a reference element and a reactive list.

Directive usage – applying the v-draggable directive to any container element.

The library also supports specifying a target container selector, allowing drag‑and‑drop on elements that are not direct children of the component, which is useful when integrating with UI component libraries.

Example code for a table component (Table.vue) and a root application (App.vue) demonstrates how to bind a list of items and render a draggable table.

<code style="padding: 16px; color: black; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px"><span style="color: #aa0d91; line-height: 26px"><template></span>
  <table>
    <thead>
      <tr><th>Id</th><th>Name</th></tr>
    </thead>
    <tbody class="el-table">
      <tr v-for="item in list" :key="item.name" class="cursor-move">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">
interface Props { list: Record<'name'|'id', string>[] }
defineProps<Props>();
</script></code>

<code style="padding: 16px; color: black; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px"><span style="color: #aa0d91; line-height: 26px"><template></span>
  <section>
    <div>
      <VueDraggable v-model="list" animation="150" target=".el-table">
        <Table :list="list" />
      </VueDraggable>
    </div>
    <div class="flex justify-between">
      <preview-list :list="list" />
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VueDraggable } from 'vue-draggable-plus';
import Table from './Table.vue';
const list = ref([
  { name: 'Joao', id: '1' },
  { name: 'Jean', id: '2' },
  { name: 'Johanna', id: '3' },
  { name: 'Juan', id: '4' }
]);
</script></code>

Finally, the author invites readers to star the GitHub repository and mentions an alternative – the useSortable hook from vueuse – for simpler use cases.