Repository files navigation

Demo |npm

This is a thin wrapper around the greatSortableJS 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 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 andvue-shopify-dragable seemed promising but they don't supported nested components

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

1. Install the package:

pnpm add sortablejs-vue3 sortablejs

or

npm install sortablejs-vue3 sortablejs

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

import{Sortable}from"sortablejs-vue3";

3. Use the component:

<template>  <main>    <Sortable:list="elements"item-key="id"tag="div":options="options"    >      <--TheHeaderandFootertemplatesbelowareoptional-->      <template #header>          <header>            <h1>SortableJS Vue3 Demo</h1>          </header>      </template>      <template #item="{element,index}">        <divclass="draggable":key="element.id">          {{ element.name }}        </div>      </template>      <template #footer>          <footerclass="draggable">A footer</footer>      </template>    </Sortable></template>

4. Thelist 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
   • Thetag prop is optional and defaults todiv. It's the HTML node type for the outer element of the included template/slot.

• list (Array<any>, required): your data to list
• itemKey (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 thekey)
• tag (string, optional, default ="div"): The element type to render as
• options (Object, false): the SortableJS options minus event handlers (see below)

You can listen to Sortable events by adding the listeners to theSortable 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 ofthe default before importing this library. For example, the below is correct:

importSortableJsfrom"sortablejs";import{Swap}from"sortablejs/modular/sortable.core.esm";SortableJs.mount(newSwap());import{Sortable}from"sortablejs-vue3";

No changes are necessary to work with Vuex or another store. Just passstore.state.items as your list. To modify your data you need to manually listen to the events and calculate the new position withevent.oldIndex andevent.newIndex with something like the following:

constmoveItemInArray=<T>(array:T[],from:number,to:number)=>{constitem=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 documentationhere.

• ./src/examples/WithStore.vue - A simple example with a store

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

• VS Code +Volar