vue-draggable-plus

前言

前段时间偶然翻掘金的过程中发现有人宣传 vue 的拖拽库断代了，那么我也来蹭一下热度。

Sortablejs

Sortablejs 是一个功能强大的 JavaScript 拖拽库，并且提供了 vue 相关的组件 vue-draggable，并且在 vue3 的前期，提供了 vue-draggable-next，但是可能由于作者的生活过于繁忙的原因，这个库已经两年没有更新了，在当前 vue3 的版本中并不适用，于是乎本人突发奇想，写了一个 vue-draggable-plus（其实很久之前就写好了，没有可以宣传），它用于兼容 vue2.7 和 vue3 以上的版本，下面我们来介绍一下它。

vue-draggable-plus

vue-draggable-plus 它用于延续 vue-draggable 核心理念，提供 vue 组件用于双向绑定数据列表，实现拖拽排序、克隆等功能，同时它还支持函数式、指令式的使用方式，让你使用起来更加方便，废话不多生活，我们先上图

更多演示请参考：demo

安装

npm install vue-draggable-plus

使用

vue-draggable-plus 支持三种使用方式：组件使用、函数式使用、指令式使用

下面我们来一一介绍：

1. 组件式使用：

它和传统的vue组件的使用方式一样，支持双向绑定数据：

<template>
    <VueDraggable
      v-model="list"
      :animation="150"
      ghostClass="ghost"
      @start="onStart"
      @update="onUpdate"
    >
      <div
        v-for="item in list"
        :key="item.id"
      >
        {{ item.name }}
      </div>
    </VueDraggable>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type UseDraggableReturn, VueDraggable } from 'vue-draggable-plus'
const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])

</script>

<style scoped>
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>

2. 函数式使用：

<template>
    <div
      ref="el"
    >
      <div
        v-for="item in list"
        :key="item.id"
      >
        {{ item.name }}
      </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useDraggable } from 'vue-draggable-plus'
const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])
const el = ref()

const { start } = useDraggable(el, list, {
  animation: 150,
  ghostClass: 'ghost',
  onStart() {
    console.log('start')
  },
  onUpdate() {
    console.log('update')
  }
})
</script>

<style scoped>
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>

它就像你使用 vueuse 一样接受一个 element 的引用，和一个响应式列表数据

3. 指令式使用

由于指令的特殊性，指令只能绑定您在 setup 中绑定的数据，它并不能支持异步绑定数据，如果您的数据来自于异步获取，那么请您使用组件或者函数式实现

<template>
    <ul
      v-draggable="[
        list,
        {
          animation: 150,
          ghostClass: 'ghost',
          onUpdate,
          onStart
        }
      ]"
    >
      <li
        v-for="item in list"
        :key="item.id"
      >
        {{ item.name }}
      </li>
    </ul>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { vDraggable } from 'vue-draggable-plus'
const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])

function onStart() {
  console.log('start')
}

function onUpdate() {
  console.log('update')
}
</script>

<style scoped>
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>

指定目标容器

在 Sortablejs 官方以往的 Vue 组件中，都是通过使用组件作为列表的直接子元素来实现拖拽列表，当我们使用一些组件库时，如果组件库中没有提供列表根元素的插槽，我们很难实现拖拽列表，vue-draggable-plus 完美解决了这个问题，它可以让你在任何元素上使用拖拽列表，我们可以使用指定元素的选择器，来获取到列表根元素，然后将列表根元素作为 Sortablejs 的 container，我们来看一下用法：

• Table.vue

<template>
  <table>
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody class="el-table"> <-- 我们会将 .el-table 的选择器传递给 vue-draggable-plus -->
      <tr v-for="item in list" :key="item.name" class="cursor-move">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
      </tr>
    </tbody>
  </table>
</template>
<script setup lang="ts">
interface Props {
  list: Record<'name' | 'id', string>[]
}
defineProps<Props>()
</script>

• App.vue

<template>
  <section>
    <div>
       <-- 传递 .el-table 作为根元素，将 .el-table 的子元素作为拖拽项 -->
      <VueDraggable v-model="list" animation="150" target=".el-table">
        <Table :list="list"></Table>
      </VueDraggable>
    </div>
    <div class="flex justify-between">
      <preview-list :list="list" />
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
import Table from './Table.vue'

const list = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])
</script>

来看效果：

结尾

如果您有使用需求，请参考文档：vue-draggable-plus，当然如果您不需要高度定制化，使用 vueuse 中的 useSortable 也是一样的。

作者：丶远方
链接：https://juejin.cn/post/7299353745506615347