Package Exports

vue3-smooth-dnd
vue3-smooth-dnd/dist/vue3-smooth-dnd.esm.js
vue3-smooth-dnd/dist/vue3-smooth-dnd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue3-smooth-dnd) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue3-smooth-dnd

Vue 3 Wrapper of smooth-dnd library.
Live demo

NOTE: This is a Vue 3 wrapper over smooth-dnd library. It's a fork of the already done vue2 wrapper done by the original author of the library.

All the documentation for the Vue 2 version works with this package version too!

Install

npm install vue3-smooth-dnd

Usage

<template>
  <div>
    <span>Studio Ghibli Tier List</span>
    <Container @drop="onDrop">            
      <Draggable v-for="(item, i) in items" :key="item.id">
        <div>
           {{i + 1}} -> {{item.data}}
        </div>
      </Draggable>
    </Container>
  </div>
</template>

<script>
import { Container, Draggable } from "vue3-smooth-dnd";
export default {
  name: "app",
  components: { Container, Draggable },
  data() {
    return {
      items: [
        { id: 1, data: "Princess Mononoke" },
        { id: 2, data: "Spirited Away" },
        { id: 3, data: "My Neighbor Totoro" },
        { id: 4, data: "Howl's Moving Castle" }
      ]
    };
  },
  methods: {  
    onDrop(dropResult){
      this.items = this.applyDrag(this.items, dropResult);
    },
    applyDrag(arr, dragResult){
      const { removedIndex, addedIndex, payload } = dragResult;

      if (removedIndex === null && addedIndex === null) return arr;
      const result = [...arr];
      let itemToAdd = payload;
      
      if (removedIndex !== null) {
        itemToAdd = result.splice(removedIndex, 1)[0];
      }
      if (addedIndex !== null) {
        result.splice(addedIndex, 0, itemToAdd);
      }
      return result;
    }
  }
}
</script>