vue实现DOM元素拖拽进行位置替换

最新推荐文章于 2025-05-08 12:00:57 发布

郭辰羽

最新推荐文章于 2025-05-08 12:00:57 发布

阅读量658

点赞数 6

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_49552046/article/details/135089884

版权

本文介绍了如何在Vue项目中通过npm安装并导入vuedraggable库，展示了如何在页面上使用它实现可拖动元素，并提供了相关事件监听方法的示例。

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

首先下载下载 vuedraggable

npm i vuedraggable --save

在需要用到的地方引入

import draggable from "vuedraggable";
components: {
  draggable,
},

在页面里使用

<draggable
v-model="loginimageUrlbig"
filter=".forbid"
group="people"
@change="change"
@start="start"
:move="onMove"
class="grid-container"
style="display: flex;flex-wrap: wrap;"
@end="end">
	<div :class="index==0?'forbid':''" v-for="(item,index) in arr" :key="index">元素</div>
</draggable>


// 监听拖拽
change(event) {
  
},
// 开始拖拽
start(event) {
	
},
//禁止
onMove(e){
	if (e.relatedContext.index == 0) return false;
	return true;
},
// 结束拖拽
end(event) {
  
},