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

2023-12-19 22:54:24

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

文章来源:https://blog.csdn.net/qq_49552046/article/details/135089884
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。