Basic usage

1

2

3

4

5

6

7

8

9

10

<template>
  <div ref="listRef">
    <div v-for="item in 10" :key="item" class="item">
      {{ item }}
    </div>
  </div>
</template>

<script setup>
import { inject, onMounted, onUnmounted, ref } from 'vue';

const dnd = ref();
const listRef = ref();

onMounted(() => {
  const Sortable = inject('Sortable');
  dnd.value = new Sortable(listRef.value, {
    chosenClass: 'chosen',
    onChoose: (evt) => {
      console.log('choose', evt);
    },
    onDrop: (evt) => {
      console.log('drop', evt);
    },
  });
});

onUnmounted(() => {
  dnd.value.destroy();
});
</script>

<style scoped>
.item {
  border-radius: 5px;
  box-shadow: 0px 2px 5px -2px #57bbb4;
  padding: 8px;
  margin-bottom: 5px;
}

.chosen {
  box-shadow: 0px 0px 5px 1px #1984ff;
}
</style>