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

最新推荐文章于 2024-04-02 08:43:45 发布

郭辰羽

最新推荐文章于 2024-04-02 08:43:45 发布

阅读量514

点赞数 6

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_49552046/article/details/135089884

版权

首先下载下载 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) {
  
},