sortablejs-vue3

SortableJS-vue3

Demo

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.

Why not use <other library>?

• Vue.Draggable only supports Vue 2
• vue.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 it
• shopify/draggable and vue-shopify-dragable seemed promising but they don't supported nested components

Usage

You can see a demo with more complete code at https://sortablejs-vue3.maxleiter.com.

1. Install the package:

yarn add sortablejs-vue3 sortablejs

or

npm install sortablejs-vue3 sortablejs

1. Import the component in your <script setup> (or <script>):

import { Sortable } from 'sortablejs-vue'

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

1. The 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

Events

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

Development

1. Run yarn to install dependencies
2. yarn dev will start a web server with live reloading
3. yarn build will build the production library files
4. yarn build:site will build the demo website

Recommended IDE Setup

• VS Code + Volar