vuedraggable拖拽,

　　这篇文章主要为大家详细介绍了vue3使用vuedraggable实现拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了vue3使用vuedraggable实现拖拽功能的具体代码，供大家参考，具体内容如下

　　1、NPM一世，使用这个命令，vue3会报错，如下图

　　2、使用新公共管理卸载vuedragable-S卸载，再使用npm i -S vuedraggable@next下载最新版

　　3、vue使用代码如下：

　　模板

　　差异

　　h1 class=title 拖拽/h1

　　可拖动的

　　 class=包装器

　　v-model=list

　　@start=drag=true

　　@end=drag=false

　　item-key=index

　　模板# item="{ element } "

　　div class=item

　　p{{ element }}/p

　　/div

　　/模板

　　/可拖动

　　/div

　　/模板

　　脚本

　　从“vue”导入{反应式，参考式，开启式}

　　从" vuedraggable "导入可拖动的

　　导出默认值{

　　名称： dragAndDrop ，

　　组件：{可拖动},

　　setup () {

　　恒定状态=反应({

　　拖：假的，

　　列表：[1,2,3,4,5,6]

　　})

　　onMounted(()={})

　　返回{

　　.toRefs(州)

　　}

　　}

　　}

　　/脚本

　　样式范围。标题{

　　文本对齐：居中；

　　颜色：# 42b983

　　}。包装{

　　显示器：flex

　　对齐-内容：居中；

　　宽度：100%;

　　}。项目{

　　宽度：100像素

　　高度：100像素

　　字体大小：50px

　　文本对齐：居中；

　　行高：100像素

　　边距：10px

　　背景色：# 42b983

　　颜色：# ffffff

　　}

　　/风格

　　4、效果如下图

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。