This is a thin wrapper around the great SortableJS library. I had many issues migrating from Vue.Draggable to vue.draggable.next, and after briefly investigating I decided that it was too complicated and a smaller solution was the answer. This wrapper attempts to keep you as close to Sortable as possible.
Vue.Draggable
only supports Vue 2vue.draggable.next
uses the Options API, has multiple open (and afaict useful) pull requests, and had weird bugs/side-effects when I tried and used itshopify/draggable
and vue-shopify-dragable
seemed promising but they don't supported nested componentsYou can see a demo with more complete code at https://sortablejs-vue3.maxleiter.com.
pnpm add sortablejs-vue3 sortablejs
or
npm install sortablejs-vue3 sortablejs
<script setup>
(or <script>
):import { Sortable } from "sortablejs-vue3";
<template>
<main>
<Sortable
:list="elements"
item-key="id"
tag="div"
:options="options"
>
<-- The Header and Footer templates below are optional -->
<template #header>
<header>
<h1>SortableJS Vue3 Demo</h1>
</header>
</template>
<template #item="{element, index}">
<div class="draggable" :key="element.id">
{{ element.name }}
</div>
</template>
<template #footer>
<footer class="draggable">A footer</footer>
</template>
</Sortable>
</template>
list
and item-key
props are necessary. The options
prop is an object that can contain any SortableJS option. You can find a full list of them here: https://github.com/SortableJS/Sortable#options
tag
prop is optional and defaults to div
. It's the HTML node type for the outer element of the included template/slot.list
(Array<any>
, required): your data to listitemKey
(string
| (item) => (string | number | Symbol)
, required): The name of the key present in each item in the list that corresponds to a unique value (to use as the key
)tag
(string
, optional, default = "div"
): The element type to render asoptions
(Object
, false): the SortableJS options minus event handlers (see below)You can listen to Sortable events by adding the listeners to the Sortable
component. For example:
<Sortable
:list="elements"
item-key="id"
@change="(event: Sortable.SortableEvent) => void"
@choose="(event: Sortable.SortableEvent) => void"
@unchoose="(event: Sortable.SortableEvent) => void"
@start="(event: Sortable.SortableEvent) => void"
@end="(event: Sortable.SortableEvent) => void"
@add="(event: Sortable.SortableEvent) => void"
@update="(event: Sortable.SortableEvent) => void"
@sort="(event: Sortable.SortableEvent) => void"
@remove="(event: Sortable.SortableEvent) => void"
@filter="(event: Sortable.SortableEvent) => void"
@move="(event: Sortable.MoveEvent, event2: Event) => void"
@move.capture="(event: Sortable.MoveEvent, event2: Event) => boolean | -1 | 1"
@clone="(event: Sortable.SortableEvent) => void"
>
You need to mount any plugins you want outside of the default before importing this library. For example, the below is correct:
import SortableJs from "sortablejs";
import { Swap } from "sortablejs/modular/sortable.core.esm";
SortableJs.mount(new Swap());
import { Sortable } from "sortablejs-vue3";
No changes are necessary to work with Vuex or another store. Just pass store.state.items
as your list. To modify your data you need to manually listen to the events and calculate the new position with event.oldIndex
and event.newIndex
with something like the following:
const moveItemInArray = <T>(array: T[], from: number, to: number) => {
const item = array.splice(from, 1)[0];
nextTick(() => array.splice(to, 0, item));
};
onEnd(event) { moveItemInArray(store.state.items, event.oldIndex, event.newIndex) }
You may also want to see the SortableJS store documentation here.
pnpm
to install dependenciespnpm dev
will start a web server with live reloadingpnpm build
will build the production library filespnpm build:site
will build the demo website