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

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