vue自由拖拽vue3-dnd(一)

vue自由拖拽vue3-dnd(一)-概述

前言

工作中碰到需要频繁使用拖拽功能，调研了vue3的dragable发现功能还是太简单了，像是一个简单的拖拽排序库，不是很满足需求。这里我要说react的拖拽库就有很多选择，这点确实vue3还需要努力。既然vue3找不到，那有没有react移植过来的呢？我一搜，还真有！就是今天的主角vue3-dnd。

这个库是react的React DnD的vue移植版本。

Vue3 DnD

vue3-dnd是基于React DnD的核心程序实现的一组Vue composition-api，它提供了尽量与React DnD保持一致的api，便于我们去构建一个复杂、自由的拖拽功能。下面将介绍一下它的基础信息。

安装

# 安装
pnpm install vue3-dnd react-dnd-html5-backend
# 或者
npm install vue3-dnd react-dnd-html5-backend
# 或者
yarn add vue3-dnd react-dnd-html5-backend

react-dnd-html5-backend 是一个React DnD 的插件，它提供了一个HTML5的拖放支持；你也可以使用react-dnd-touch-backend 提供触摸拖放支持。

特性

Composition API

基于Vue的组合式API，你可以在任何组件中使用拖拽。

双向数据绑定

基于Vue的双向数据绑定，你可以在数据更新时自动更新UI。

支持Vue2和Vue3

同时支持Vue2和Vue3两个版本

支持Vue2

由于Vue2的一些特性，在Vue2中使用还有一点细微的差别：

1. 在Vue<=2.6中使用，需要先安装@vue/composition-api
2. 由于Vue2不支持dom ref函数，所以我们必须额外定义一个ref，用于承载dom节点，并将这个ref传递给我们的connect函数。

以下是一个示例

<template>
    <div
        ref="element"
        role="Box"
        :data-testid="`box-${name}`"
    >
        {{ name }}
    </div>
</template>

<script lang="ts" setup>
import { useDrag } from 'vue3-dnd'
import { ref } from '@vue/composition-api'

interface DropResult {
  name: string
}

const props = defineProps<{ name: string }>()

const [collect, drag, dragPreview] = useDrag(() => ({
    type: 'BOX',
    item: { name: props.name },
}))

const element = ref()
drag(element)
// 可选的，默认与drag一致
// dragPreview(element)
// 如果是useDrop，也是一样的
// drop(element)
</script>

扩展和测试

受益于React DnD的backend设计，你可以自定义一个DnD backend，并且可以使用 react-dnd-test-backend 测试你的拖拽组件。

后续我会讲一些react-dnd的基础概念，尽请期待