vue是怎么实现的,vue项目知识点详解
本文主要介绍vue draggable在vue项目中的使用。本文介绍了错误问题的分析和解决方法。这篇文章很详细，对你的学习或者工作有一定的参考价值。有需要的朋友可以参考一下。
最近在研究一个可视化的构造项目，里面用的拖拽是draggable.js看了几个中文文档，有很多漏洞，可能是没有及时更新的原因。
某视频剪辑软件
建议阅读vuedraggable的官方文档，只有英文版。官方文件：https://github.com/SortableJS/Vue.可拖动；
由于vue3已经是默认版本，vuedraggable也有自己对应vue2.0和3.0的版本。使用基本命令直接安装它：
npm安装vuedragable-保存
默认情况下会安装2.1左右的版本，由于我的项目是由vue3构建的，所以我会报告一个错误：
就是draggable的版本不对，导致出错。4.1.0版本换位问题解决。
Npi vue draggable @ 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= myArray中的元素:key= element . id { element . name } }/div
/可拖动
//.vue文件：
从“vuedraggable”导入可拖动的
.
导出默认值{
组件：{
可拖动，
},
.
带过渡组：
可拖动v-model=myArray
过渡组
div v-for= myArray中的元素:key=element.id
{{element.name}}
/div
/过渡-组
/可拖动
而且在vue3中，这样写是有问题的，官网提示：
重大变化：
使用项目槽而不是默认值来显示元素#使用项目槽而不是默认值来显示元素使用项目键属性为项目提供键#使用项目键属性为项目提供键。
变化真的很大。它是这样写的：
出发地：
！- vue 2版本-
可拖动v-model=myArray
div v-for= myArray中的元素:key= element . id { element . name } }/div
/可拖动
收件人：
可拖动v-model=myArray item-key=id
模板# item=“{ element }”
div{{element.name}}/div
/模板
/可拖动
当使用转换时，您现在应该使用tag和componentData来创建转换。
从
！- vue 2版本-
可拖动v-model=myArray
过渡组名称=fade
div v-for= myArray中的元素:key=element.id
{{element.name}}
/div
/过渡-组
/可拖动
到
可拖动v-model= myArray tag= transition-group :component-data= { name: fade }
模板# item=“{ element }”
div{{element.name}}/div
/模板
/可拖动
注意：克隆时，vue2.x的Draggable组件中的配置项writing(:options= { group:{ name: article ，pull: clone}，sort: false} )在vue3中没有影响。
vue3中的参数需要单独配置，比如：group= {name: article ，pull: clone}: sort= false 等等。
关于vue draggable在vue项目中的使用的这篇文章到此为止。关于使用vuedraggable的Vue的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。