vue3项目使用vuedraggable拖拽组件

最新推荐文章于 2025-07-29 09:14:48 发布

某小只

最新推荐文章于 2025-07-29 09:14:48 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签：学习 vue.js 前端

本文链接：https://blog.csdn.net/Yyyy123n/article/details/125315708

本文介绍了在Vue3项目中使用vuedraggable组件的步骤，包括安装、引入和配置注意事项。强调了必须使用最新版，设置`item-key`以及在模板中使用`#item`语法。同时提供了一个在线示例链接以帮助理解，并鼓励读者遇到问题时留言讨论。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装:

npm i -S vuedraggable@next   //这样才能安装最新的版本，低版本会踩坑

2.引入（注册使用即可）

import draggable from 'vuedraggable'

3.小示例

      <draggable  
        v-model="list" 
        class="list-group"
        group="people" 
        @start="drag=true" 
        @end="drag=false" 
        item-key="id">
        <template #item="{ element }">
            <div class="list-group-item">
              {
  
  { element.name }}
            </div>
        </template>
      </draggable>

4.注意！！！

使用vue3的话一定要下载最新版

item-key一定要写

<template #item="{ element }">一定要写

否则就不生效或者报错

附上一个我从网上看到的示例网站，对理解会有帮助vuedraggable