【vue】 vue实现前端拖拽div位置交换

万万哇 · 2025-1-4 20:42:14

一、场景描述

雷同备忘录，点击添加按钮，多一条条目。然后手动拖拽条目可以更换条目之前的位置。
二、题目拆解

这里可以分成两个题目，第一个是添加，第二个是拖拽。
添加的实现：vue技术像一个前端页面的数据管理器，它内里的 “v-for”列表渲问鼎令支持当列表数据增加的时候实现重新渲染增加一个条目。
拖拽的实现：拖拽事故，开始的时候必要纪录所拖拽的目的，拖拽经过的实现交换。
三、知识配景

3.1 vue拖拽事故

在这里，我们使用的是开始拖拽事故和在有效地区移动事故，为的是得到所拖拽的标签元素以及被拖动标签元素所要到达的原有标签元素的位置。
下面举例一下拖拽事故怎么用。
起首必要开始标签拖拽功能：draggable=“true” ，再添加拖拽事故。

<div class="task" draggable="true" @dragstart.self = "ondragstart($event)" @dragover.self = "ondragover($event)">
</div>

复制代码

3.2 js获得同级元素节点

ele.previousSibling ele.previousElementSibling 获取同级的上下级，（前一个标签元素和后一个标签元素）
ele.nextSibling ele.nextElementSibling

复制代码

<input id="a5" type="button" onclick="console.log('previousSibling是'+this.previousSibling);" value="e" />
<input id="a6" type="button" onclick="console.log(this.previousSibling);" value="e" />
<input id="a7" type="button" onclick="console.log('previousElementSibling是'+this.previousElementSibling);" value="e" />
<input id="a8" type="button" onclick="console.log(this.previousElementSibling);" value="e" />

复制代码

四、场景实现

添加的实现：就是用vue中的v-for指令。点击按钮之后，在列表中加一个列表元素，就会重新渲染。
拖拽的实现：这里有两种大概性，一个是如果是往前拖拽，则所要拖拽元素放在目的元素之前；如果是往后拖拽，则所要拖拽元素放在目的元素之后。
因此必要判断目的元素是否是前面的元素。

isPreviousElements(sourse, target){
//这里是判断前面是否还有元素，sourse是不是第一个元素
if(!sourse.previousElementSibling){
return false;
}
//这里是判断
if(target.isEqualNode(sourse.previousElementSibling)){
return true;
}
return this.isPreviousElements(sourse.previousElementSibling, target)
},

复制代码

然后把标签元素放入到目的元素之前或之后。
完备代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>todayTask</title>
<script src="../js/vue.js"></script>
<style>
.task{
width: 300px;
height: 50px;
list-style-type:decimal;
list-style-position:inside;
cursor: grab;
position: absolute;
transition: top;
transition-duration: 0.6s;
}
.taskList{
position: relative;
display: flex;
flex-direction: column;
}
.addTask{
display: block;
}
</style>
</head>
<body>
<div class="container">
<button class="addTask" @click="addTask">添加任务</button>
<div class="taskList">
<div class="task" draggable="true" @dragstart.self = "ondragstart($event)" @dragover.self = "ondragover($event)" v-for="task in tasks" :key="task.id">
<span>
{{task.id}}
<input type="text" v-model="task.task">
</span>
</div>
</div>
</div>
</body>
<script>
document.body.addEventListener("dragover",function(ev){
ev.preventDefault();
})
new Vue({
el:".container",
data:{
tasks:[
{id:1,task:"",isDone:false}
],
dragDiv:"",
isMoving:false
},
methods:{
addTask(){
this.tasks.push({id:this.tasks.length+1,task:"",isDone:false})
var taskList = document.getElementsByClassName("taskList")[0];
taskList.style.height = this.tasks.length*50+"px"
},
sortDiv(divs){
for(var i=0;i<divs.length;i++){
divs[i].style.top = i*50 + "px";
}
},
isPreviousElements(sourse, target){
//返回上一节点
if(!sourse.previousElementSibling){
return false;
}
if(target.isEqualNode(sourse.previousElementSibling)){
return true;
}
return this.isPreviousElements(sourse.previousElementSibling, target)
},
ondragstart(ev){
this.dragDiv = ev.target;
console.log("dragstart");
},
ondragover(ev){
overDrag = ev.target;
console.log(overDrag.isEqualNode(this.dragDiv));
console.log(this.isMoving);
if(this.isMoving || overDrag.isEqualNode(this.dragDiv)){
return;
}
//判断是否是前一个标签元素
if(this.isPreviousElements(overDrag,this.dragDiv)){
overDrag.parentNode.insertBefore(this.dragDiv,overDrag.nextElementSibling);
}else{
overDrag.parentNode.insertBefore(this.dragDiv,overDrag);
}
this.isMoving = true;
const self = this;
var st = setTimeout(function(){
self.isMoving = false;
clearTimeout(st);
},600);
this.sortDiv(document.querySelectorAll(".task"));
}
},
created(){
//设置ul的盒子高度
var taskList = document.getElementsByClassName("taskList")[0];
taskList.style.height = this.tasks.length*50+"px";
//设置每一个item的上边缘top
this.sortDiv(document.querySelectorAll(".task"));
},
updated(){
this.sortDiv(document.querySelectorAll(".task"));
}
})
</script>
</html>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

【vue】 vue实现前端拖拽div位置交换

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云