Vue中使用 vuedraggable进行拖拽

前端小趴菜052024-11-01 17:45

本文主要记录下 vuedraggable拖拽在 vue2 和 vue3 中使用上的区别。

一、安装

vue2 安装命令

javascript 复制代码

npm i vuedraggable -S

vue3 安装会报错：Cannot read property 'header' of undefined。安装最新版本的vuedraggable即可，命令行如下

vue3 安装命令

javascript 复制代码

npm i -S vuedraggable@next

二、使用

vue2 使用

javascript 复制代码

<template>
  <draggable v-model="myArray">
    <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
  </draggable>
</template>
 
<script>
import draggable from 'vuedraggable'
 
export default {
  components: {
    draggable
  },
  data () {
    return {
      myArray: [
        { id: 1, name: 'Jenny' },
        { id: 2, name: 'kevin' },
        { id: 3, name: 'lili' }
      ]
    }
  }
}
</script>

vue3 使用

javascript 复制代码

<template>
  <draggable 
    v-model="data.myArray" 
    group="people" 
    @start="data.drag=true" 
    @end="data.drag=false" 
    item-key="id">
    <template #item="{element}">
      <div>{{element.name}}</div>
     </template>
  </draggable>
</template>
 
<script lang="ts" setup>
import { reactive } from 'vue'
import draggable from 'vuedraggable'
    const data = reactive({
      drag: false,
      myArray: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' }
      ]
    })

</script>