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 tries to keep you as close to Sortable as possible (wrapper libaries seem to re-implement or unnecessarily wrap a lot of code).
Note that this library is small enough (see Sortable.vue for what you really need) that I recommend including it in your project without using npm and importing it as a local component. All you need is the linked file.
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
andvue-shopify-dragable
seemed promising but they don't supported nested components
You can see a demo with more complete code at https://sortablejs-vue3.maxleiter.com.
- Install the package:
yarn add sortablejs-vue3 sortablejs
or
npm install sortablejs-vue3 sortablejs
- Import the component in your
<script setup>
(or<script>
):
import { Sortable } from 'sortablejs-vue3'
- Use the component:
<template>
<main>
<Sortable
:list="elements"
item-key="id"
:options="options"
>
<template #item="{element, index}">
<div class="draggable" :key="element.id">
{{ element.name }}
</div>
</template>
</Sortable>
</template>
- The
list
anditem-key
props are necessary. Theoptions
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
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"
@clone="(event: Sortable.SortableEvent) => void"
>
No changes are necessary to work with Vuex. Just pass store.state.item
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];
array.splice(to, 0, item);
};
onEnd(event) { moveItemInArray(store.state.items, event.oldIndex, event.newIndex) }
- Run
yarn
to install dependencies yarn dev
will start a web server with live reloadingyarn build
will build the production library filesyarn build:site
will build the demo website