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

1npm install vue3-smooth-dnd

Usage

1<template>
2  <div>
3    <span>Studio Ghibli Tier List</span>
4    <Container @drop="onDrop">            
5      <Draggable v-for="(item, i) in items" :key="item.id">
6        <div>
7           {{i + 1}} -> {{item.data}}
8        </div>
9      </Draggable>
10    </Container>
11  </div>
12</template>
13
14<script>
15import { Container, Draggable } from "vue3-smooth-dnd";
16export default {
17  name: "app",
18  components: { Container, Draggable },
19  data() {
20    return {
21      items: [
22        { id: 1, data: "Princess Mononoke" },
23        { id: 2, data: "Spirited Away" },
24        { id: 3, data: "My Neighbor Totoro" },
25        { id: 4, data: "Howl's Moving Castle" }
26      ]
27    };
28  },
29  methods: {  
30    onDrop(dropResult){
31      this.items = this.applyDrag(this.items, dropResult);
32    },
33    applyDrag(arr, dragResult){
34      const { removedIndex, addedIndex, payload } = dragResult;
35
36      if (removedIndex === null && addedIndex === null) return arr;
37      const result = [...arr];
38      let itemToAdd = payload;
39      
40      if (removedIndex !== null) {
41        itemToAdd = result.splice(removedIndex, 1)[0];
42      }
43      if (addedIndex !== null) {
44        result.splice(addedIndex, 0, itemToAdd);
45      }
46      return result;
47    }
48  }
49}
50</script>