vue.draggable拖拽插件的使用

vue.draggable中文文档: https://www.itxst.com/vue-draggable/tutorial.html
文档中有例子，事件和属性等一系列的文档说明，可以自己查阅。

安装

注意vue2和vue3安装的版本是不一样的，安装错误版本拖拽效果不会显示。

vue2安装

yarn add vuedraggable
npm i -S vuedraggable

vue3安装

yarn add vuedraggable@next
npm i -S vuedraggable@next

使用

首先我们需要引入组件，引入之后直接使用就可以了，这里我用vue3做演示使用。

import draggable from 'vuedraggable'

这个时候我们还需要给我们vue页面中添加这个组件

  components: {draggable},

整体如下图所示：

list为我们的数组，group是分组，同一个分组下的可以进行拖拽，下面两个是开始拖动和结束拖动的事件，animation为动画效果，数字越大动画时间越久。他会自动给我们对list数组进行循环，element就是每一次循环的值。

这样子我们就可以使用了，里面其他的属性和事件的需求请自己查看文档，官方文档的实现例子更为丰富一下。
但是需要注意的是，template中只能有一个div，就是只能有一个属性，所以如果我们需要在循环的时候显示多个属性，就需要用一个大div块包裹起来。

          <template #item="{element}"><div><div id="item">{{ element.name }}</div><el-button style="margin-left: 10px" type="primary" @click="editThreadBodyValueEvent(element)"><el-icon><Edit/></el-icon>&nbsp;修改</el-button></div></template>

闲谈

因为自己当时使用这个组件的时候，无论怎么样效果就是显示不出来，然后还有一些其他的问题，自己就写一个博客记录一下，并且也分享一下我遇到的问题让大家避免一下，如果这篇博客哪里出现了错误，欢迎指正，如果有什么不懂的问题我们可以一起探讨哦。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！