Vue中使用 vuedraggable进行拖拽

本文主要记录下 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>
相关推荐
hongc935 分钟前
element-ui el-table 设置固定列fixed 高度不对
前端·vue.js·elementui
Forfun_tt16 分钟前
xss-labs pass-12
前端·xss
云枫晖32 分钟前
Webpack系列-编译过程
前端·webpack
AskHarries41 分钟前
Toolhub — 一个干净实用的在线工具集合
前端·后端
H尗1 小时前
Vue3响应式系统的精妙设计:深入理解 depsLength 与 trackId 的协同艺术
前端·vue.js
昔人'1 小时前
html`contenteditable`
前端·html
爱宇阳1 小时前
npm 常用标签与使用技巧新手教程
前端·npm·node.js
郑板桥301 小时前
TypeScript:npm的types、typings、@type的区别
javascript·typescript·npm
JinSoooo1 小时前
pnpm monorepo 联调:告别 --global 参数
开发语言·javascript·ecmascript·pnpm
@大迁世界1 小时前
2025 年该选谁?npm vs yarn vs pnpm
前端·npm·node.js