2024年前端最新用vue实现H5页面托拽的div(兼容pc与移动端)，前端面试知识点总结宝典助你通关

总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

JavaScript

性能

linux

odiv.style.top = top + “px”;

};

document.onmouseup = (e) => {

document.onmousemove = null;

document.onmouseup = null;

};

},

},

};

移动端的拖拽事件有点特殊，点击元素获取可视左边的位置的方法不是e.clientX而是e.changedTouches[0].pageX

按下、拖动、松开事件也改变了，接下来上代码

id=“app”

@touchstart=“touchStart”

@touchmove=“touchMove”

@touchend=“touchEnd”

TouchEvent事件

综合起来的代码

id=“app”

@mousedown=“move”

@touchstart=“touchStart”

@touchmove=“touchMove”

@touchend=“touchEnd”

==========5.20号跟新

上面的版本虽然能实现拖动，但是假如给元素加个比如子元素比如像这样

id=“app”

@mousedown=“move”

@touchstart=“touchStart”

@touchmove=“touchMove”

@touchend=“touchEnd”

我爱我的祖国

请不要点到我了

用之前的办法取到的e.target是你点到哪个元素就是哪个元素的dom节点，显然这样是不对的，甚至你点击到子元素会使父元素失效。

那么就要用jq来获取元素节点

修改后的代码

id=“app-div”

@mousedown=“move”

@touchstart=“touchStart”

@touchmove.prevent=“touchMove”

@touchend=“touchEnd”

//插槽，这里可以放子元素