2024年用vue实现H5页面托拽的div(兼容pc与移动端)_h5移动端拖动效果(1)，Web前端攒了一个月的面试题及解答
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
项目地址：https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
更多面试题
**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
1、当在屏幕上按下手指时触发：touchstart
2、当在屏幕上移动手指时触发：touchmove
3、当在屏幕上抬起手指时触发：touchend
4、touchcancel 当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发
touchcancel。一般会在touchcancel时暂停游戏、存档等操作。
其次知道几个概念
window.outerWidth与window.outerHeight：获得的是加上工具条与滚动条窗口的宽度与高度。
window.innerWidth与window.innerHeight：获得的是可视区域的宽高，但是宽度包含了纵向滚动条的宽度。
document.documentElement.clientWidth与document.documentElement.clientHeight：获得的是屏幕可视区域的宽高，不包括滚动条与工具条，
- clientY 指的是距离可视页面左上角的距离
- pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)
- screenY 指的是距离屏幕左上角的距离
- layerY 指的是找到它或它父级元素中最近具有定位的左上角距离
- offsetY 指的是距离它自己左上角的距离
接下来上代码，先绑定PC端的托拽事件
<template>
<div
id="app"
@mousedown="move"
>
</div>
</template>
<script>
export default {
name: "Drag",
data() {
return {};
},
methods: {
move(e) {
e.preventDefault();
let odiv = e.target; //获取目标元素
//算出鼠标相对元素的位置
let disX = e.clientX - odiv.offsetLeft;
let disY = e.clientY - odiv.offsetTop;
console.log("x======" + disX, "y======" + disY);
console.log(
"offsetLeft======" + odiv.offsetLeft,
"offsetTop======" + odiv.offsetTop
);
console.log(window.innerWidth,window.innerHeight);//可视区域的宽高，但是宽度包含了纵向滚动条的宽度
console.log(document.documentElement.clientWidth);//可视区域的宽高，但是宽度不包含了纵向滚动条的宽度
console.log(odiv.offsetWidth, odiv.offsetHeight); //元素宽高
document.onmousemove = (e) => {
//鼠标事件
//鼠标按下并移动的事件
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
if (left < 0) {
left = 0;
}
if (left >document.documentElement.clientWidth - odiv.offsetWidth) { //如果元素移动宽度超过屏幕可视高度则为屏幕高度
left = document.documentElement.clientWidth - odiv.offsetWidth;
}//判断与左边的距离不能超出屏幕可见区域外
if (top <0) {
top = 0;
}
if (top >document.documentElement.clientHeight - odiv.offsetHeight) { //如果元素移动高度超过屏幕可视高度则为屏幕高度
top =document.documentElement.clientHeight - odiv.offsetHeight;
}
console.log("left======" + left, "top======" + top);
//移动当前元素
odiv.style.left = left + "px";
odiv.style.top = top + "px";
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
},
},
};
</script>
<style lang="scss" scoped>
#app {
position: absolute; /\*定位\*/
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background: red; /\*设置一下背景\*/
z-index: 999;
cursor: pointer;
}
</style>
移动端的拖拽事件有点特殊，点击元素获取可视左边的位置的方法不是e.clientX而是e.changedTouches[0].pageX
按下、拖动、松开事件也改变了，接下来上代码
<template>
<div
id="app"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
>
</div>
</template>
<script>
export default {
name: "Drag",
data() {
return {
touchX: 0,//移动端点击时距左边的距离
touchY: 0,
odiv: "",
};
},
methods: {
//手指按下
touchStart(e) {
e.preventDefault();
this.odiv = e.target; //获取目标元素
//算出鼠标相对元素的位置
this.touchX = e.changedTouches[0].pageX - this.odiv.offsetLeft;
this.touchY = e.changedTouches[0].pageY - this.odiv.offsetTop;
console.log("x======" + this.touchX, "y======" + this.touchY);
console.log(e);
console.log(
"offsetLeft======" + this.odiv.offsetLeft,
"offsetTop======" + this.odiv.offsetTop
);
console.log("innerWidth====="+window.innerWidth,"innerHeight====="+window.innerHeight);
console.log(this.odiv.offsetWidth, this.odiv.offsetHeight); //元素宽高
},
//手指拖动事件
touchMove(e) {
//用手指的位置减去手指相对元素的位置，得到元素的位置
let left = e.changedTouches[0].pageX - this.touchX;
let top = e.changedTouches[0].pageY - this.touchY;
console.log("left======" + left, "top======" + top);
if (left < 0) {
left = 0;
}
if (left > window.innerWidth - this.odiv.offsetWidth) {
left = window.innerWidth - this.odiv.offsetWidth;
}//可视区域宽度
if (top < 0) {
top = 0;
}
if (top >window.innerHeight - this.odiv.offsetHeight) {
top = window.innerHeight - this.odiv.offsetHeight;
}//可视区域高度
//移动当前元素
this.odiv.style.left = left + "px";
this.odiv.style.top = top + "px";
},
//手指抬起
touchEnd() {
console.log(123)
},
},
};
</script>
<style lang="scss" scoped>
#app {
position: absolute; /\*定位\*/
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background: red; /\*设置一下背景\*/
z-index: 999;
}
</style>
TouchEvent事件
综合起来的代码
<template>
<div
id="app"
@mousedown="move"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
>
</div>
</template>
<script>
export default {
name: "Drag",
data() {
return {
touchX: 0,//移动端点击时距左边的距离
touchY: 0,
odiv: "",
};
},
methods: {
move(e) {
e.preventDefault();
let odiv = e.target; //获取目标元素
//算出鼠标相对元素的位置
let disX = e.clientX - odiv.offsetLeft;
let disY = e.clientY - odiv.offsetTop;
console.log("x======" + disX, "y======" + disY);
console.log(
"offsetLeft======" + odiv.offsetLeft,
"offsetTop======" + odiv.offsetTop
);
console.log(window.innerWidth,window.innerHeight);//可视区域的宽高，但是宽度包含了纵向滚动条的宽度
console.log(document.documentElement.clientWidth);//可视区域的宽高，但是宽度不包含了纵向滚动条的宽度
console.log(odiv.offsetWidth, odiv.offsetHeight); //元素宽高
document.onmousemove = (e) => {
//鼠标事件
//鼠标按下并移动的事件
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
if (left < 0) {
left = 0;
}
if (left >document.documentElement.clientWidth - odiv.offsetWidth) { //如果元素移动宽度超过屏幕可视高度则为屏幕高度
left = document.documentElement.clientWidth - odiv.offsetWidth;
}//判断与左边的距离不能超出屏幕可见区域外
if (top <0) {
top = 0;
}
if (top >document.documentElement.clientHeight - odiv.offsetHeight) { //如果元素移动高度超过屏幕可视高度则为屏幕高度
top =document.documentElement.clientHeight - odiv.offsetHeight;
}
console.log("left======" + left, "top======" + top);
//移动当前元素
odiv.style.left = left + "px";
odiv.style.top = top + "px";
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
},
//手指按下
touchStart(e) {
e.preventDefault();
this.odiv = e.target; //获取目标元素
//算出鼠标相对元素的位置
this.touchX = e.changedTouches[0].pageX - this.odiv.offsetLeft;
this.touchY = e.changedTouches[0].pageY - this.odiv.offsetTop;
console.log("x======" + this.touchX, "y======" + this.touchY);
console.log(e);
console.log(
"offsetLeft======" + this.odiv.offsetLeft,
"offsetTop======" + this.odiv.offsetTop
);
console.log("innerWidth====="+window.innerWidth,"innerHeight====="+window.innerHeight);
console.log(this.odiv.offsetWidth, this.odiv.offsetHeight); //元素宽高
},
//手指拖动事件
touchMove(e) {
//用手指的位置减去手指相对元素的位置，得到元素的位置
let left = e.changedTouches[0].pageX - this.touchX;
let top = e.changedTouches[0].pageY - this.touchY;
console.log("left======" + left, "top======" + top);
if (left < 0) {
left = 0;
}
if (left > window.innerWidth - this.odiv.offsetWidth) {
left = window.innerWidth - this.odiv.offsetWidth;
}
if (top < 0) {
top = 0;
}
if (top >window.innerHeight - this.odiv.offsetHeight) {
top = window.innerHeight - this.odiv.offsetHeight;
}
//移动当前元素
this.odiv.style.left = left + "px";
this.odiv.style.top = top + "px";
},
//手指抬起
touchEnd() {
console.log(123)
},
},
};
</script>
<style lang="scss" scoped>
#app {
position: absolute; /\*定位\*/
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background: red; /\*设置一下背景\*/
z-index: 999;
cursor: pointer;
}
### 文末
js前端的重头戏，值得花大部分时间学习。
推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。
学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。
面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。
**这是288页的前端面试题**
讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。
学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。
面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。
**这是288页的前端面试题**
GitHub 加速计划 / vu / vue
100
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：17 天前 )
9e887079
[skip ci] 11 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
5
0- 0
已为社区贡献4条内容
所有评论(0)