Vue3拖拽功能 vue-draggable-plus

Vue拖拽功能 vue-draggable-plus，支持V2和V3

---

---

介绍 VueDraggablePlus

最近需要pc上做拖拽功能，之前在移动端使用的是Sortablejs，由于 Sortablejs 的 vue3 组件一直没有更新，已经跟 vue3 严重脱节，所以诞生了这个VueDraggablePlus项目。这次就对VueDraggablePlus的使用记录一下。
官方地址：
VueDraggablePlus官网

---

一、使用说明

版本支持

拖拽排序模块，支持 Vue>=v3 或 Vue >=2.7。V2和V3都是支持的大家可以放心使用。

安装

npm install vue-draggable-plus

二、使用实例

1.双列表拖拽

代码如下（示例）：

<template>
  <div class="flex" style="width: 600px; margin: 100px auto">
    <VueDraggable
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
      v-model="list1"
      animation="150"
      ghostClass="ghost"
      group="people"
      @update="onUpdate"
      @add="onAdd"
      @remove="remove"
    >
      <div v-for="item in list1" :key="item.id" class="cursor-move h-30 bg-gray-500/5 rounded p-3">
        {{ item.name }}
      </div>
    </VueDraggable>
    <VueDraggable
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
      v-model="list2"
      animation="150"
      group="people"
      ghostClass="ghost"
      @update="onUpdate"
      @add="onAdd"
      @remove="remove"
    >
      <div v-for="item in list2" :key="item.id" class="cursor-move h-30 bg-gray-500/5 rounded p-3">
        {{ item.name }}
      </div>
    </VueDraggable>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { VueDraggable } from 'vue-draggable-plus';
const list1 = ref([
  {
    name: 'Joao',
    id: '1',
  },
  {
    name: 'Jean',
    id: '2',
  },
  {
    name: 'Johanna',
    id: '3',
  },
  {
    name: 'Juan',
    id: '4',
  },
]);
const list2 = ref(
  list1.value.map(item => ({
    name: `${item.name}-2`,
    id: `${item.id}-2`,
  })),
);
function onUpdate() {
  console.log('update');
}
function onAdd() {
  console.log('add');
}
function remove() {
  console.log('remove');
}
</script>

代码执行效果图:

2.更多拖拽效果

以上代码只是展示了双列表拖拽，文档里面还有更多的拖拽方式可以按需尝试。

总结

使用很方便，不需要安装过多的依赖，下载即用。所以如果你想了解更多关于 Sortablejs 的信息，可以查看Sortablejs 官网。