vue项目中加入拖放排序功能

最新推荐文章于 2025-08-09 20:51:19 发布

weixin_30617797

最新推荐文章于 2025-08-09 20:51:19 发布

阅读量105

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lhy-555/p/10256499.html

本文详细介绍了如何在Vue项目中使用vuedraggable组件实现列表拖拽功能，包括下载、引入、注册组件及页面配置等步骤。同时，针对移动端拖拽冲突问题，提供了通过设置handle属性来指定拖动手柄的解决方案。

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

1、下载：npm install vuedraggable

2、引入：import draggable from 'vuedraggable'

3、注册组件：components:{ draggable }

4、页面组件：

<draggable v-model="myArray" :options="{group:'people'}" @start="drag=true" @end="drag=false" class="box">
<div v-for="element in myArray" :key="element.id">
<span class="myHandle">{{element.name}}</span>
<img :src="element.src" />
</div>
</draggable>

5、data中加上myArray数组，自己加一些数据

现在就可以拖拽了，只是有个小问题，在移动端需要加个把手拖动，不然拖动会和页面的滑动事件冲突

最后在vuedraggable.js源码里找了半天也没解决，结果发现在sortable.js的文档中给option再加个handel属性就可以了

handle属性：只有按住拖动手柄才能使列表单元进行拖动

:options="{group:'people',handle:'.myHandle'}"

还有很多属性见https://segmentfault.com/a/1190000008209715

转载于:https://www.cnblogs.com/lhy-555/p/10256499.html