详解vue项目中使用vuedraggable
最近在学习一个可视化搭建的项目，里面用的拖拽就是draggable.js。看了几个中文的文档，有很多坑，可能是没有及时更新的原因。
VUe
建议去看vuedraggable的官方文档，只不过是英文的。官方文档：https://github.com/SortableJS/Vue.Draggable；
由于vue3已经是默认版本了，所以vuedraggable也对应vue2.0和3.0有各自的版本，直接使用基本命令安装：
npm install vuedraggable --save
会默认安装2.1左右的版本，由于我的项目是vue3构建的，所以会报错：
就是draggable版本不对，导致错误，版本换位4.1.0的就解决了
npm i vuedraggable@4.1.0 --save 或 yarn add vuedraggable@4.1.0
在官网里专门对vue版本的不同做了对应的解释，在vue2中，
<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
<div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>//.vue file:
import draggable from 'vuedraggable'
...
export default {
components: {
draggable,
},
...With transition-group:
<draggable v-model="myArray">
<transition-group>
<div v-for="element in myArray" :key="element.id">
{{element.name}}
</div>
</transition-group>
</draggable>而在vue3中，这样写是有问题的，官网提示：
Breaking changes:
Use item slot instead of default to display elements#使用项目槽而不是默认值来显示元素Provide a key for items using itemKey props#使用itemKey道具为物品提供密钥
变动确实挺大的，写法如下：
From:
<!-- vue 2 version -->
<draggable v-model="myArray">
<div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>To:
<draggable v-model="myArray" item-key="id">
<template #item="{element}">
<div>{{element.name}}</div>
</template>
</draggable>当使用transition时，现在应该使用tag和componentData来创建transition
From
<!-- vue 2 version -->
<draggable v-model="myArray">
<transition-group name="fade">
<div v-for="element in myArray" :key="element.id">
{{element.name}}
</div>
</transition-group>
</draggable>to
<draggable v-model="myArray" tag="transition-group" :component-data="{name:'fade'}">
<template #item="{element}">
<div>{{element.name}}</div>
</template>
</draggable>注：在进行clone时，vue2.x版本Draggable 组件中的配置项写法（:options="{group:{name: 'article',pull:'clone'}, sort: false}"）在vue3中不起效，
vue3中需要将里面的参数单独进行配置，如：:group="{name: 'article',pull:'clone'}" :sort='false' 等。
到此这篇关于vue项目中使用vuedraggable的文章就介绍到这了,更多相关vue使用vuedraggable内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了antd-日历组件,前后禁止选择,只能选中间一部分的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
this.$nextTick是在下次dom更新循环之后执行延迟回调,在修改数据之后立即使用这个方法,获取更新后的dom,下面这篇文章主要给大家介绍了关于Vue中this.$nextTick()的理解与使用的相关资料,需要的朋友可以参考下2022-02-02
本篇文章主要介绍了详解使用webpack打包编写一个vue插件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了Vue子组件如何修改父组件数据的方法及注意事项,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了Vue一个案例引发的递归组件的使用，本文主要给大家展示如何在项目中使用递归组件，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
本篇文章主要介绍了Vue.js实现简单动态数据处理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
懒加载是一种网页优化技术，也被称为延迟加载，它的主要目的是在网页加载时，只加载当前可见区域内的内容，而延迟加载其他不可见区域的内容，从而提高网页的加载速度和性能，这篇文章主要介绍了vue图片懒加载的两种方法,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vxe-table vue table 表格组件功能，功能非常强大，文中给大家提到了功能点,需要的朋友可以参考下2019-05-05
vue.js中window.onresize的超详细使用方法
这篇文章主要给大家介绍了关于vue.js中window.onresize的超详细使用方法,window.onresize 是直接给window的onresize属性绑定事件,只能有一个,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue踩坑记录之src的动态绑定赋值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
最新评论