大家都知道在写PC端页面时,可以用原生js写出可以拖拽的盒子,但是用同样的方法,再写移动端时,就不生效了。到底是怎么回事呢?今天我来给大家说说
因为在移动端不能使用鼠标按下、鼠标移动、鼠标抬起事件,而应该使用手指按下事件(ontouchstart)、手指移动事件(ontouchmove)、手指抬起事件(ontouchend)
具体实现js代码
// 先获取到dom节点
const dream = document.getElementsByClassName("box")[0]
// 给dom节点加一个手指按下事件
dream.ontouchstart = function (ev) {
// 计算出当前手指按下的位置距离这个盒子最左侧的距离disX
let disX = ev.touches[0].clientX - dream.offsetLeft
// 计算出当前手指按下的位置距离这个盒子最顶端的距离disY
let disY = ev.touches[0].clientY - dream.offsetTop
// 给document对象加一个手指移动事件
document.ontouchmove = function (ev) {
// ev.touches[0].clientX - disX可以计算出当前这个盒子左侧边与页面左侧的距离
// 判断它要是小于等于0的时候,就让与页面左侧位置持平,不能让它去页面外面
if (ev.touches[0].clientX - disX <= 0) {
dream.style.left = 0 + "px"
return false
}
// 同上 这个是让盒子不能出页面右侧
if (ev.touches[0].clientX - disX >= 308) {
dream.style.left = 308 + "px"
return false
}
// 将盒子的距离页面左侧的样式改变
dream.style.left = ev.touches[0].clientX - disX + "px"
// 这个是让盒子不能出页面底部
if (ev.touches[0].clientY - disY >= 480) {
dream.style.top = 480 + "px"
return false
}
// 这个是让盒子不能出页面顶部
if (ev.touches[0].clientY - disY <= 215) {
dream.style.top = 215 + "px"
return false
}
// 将盒子的距离页面顶端的样式改变
dream.style.top = ev.touches[0].clientY - disY + "px"
}
// 手指抬起事件
document.ontouchend = function () {
// 删除手指移动事件
document.ontouchmove = null
// 删除手指抬起事件
document.ontouchend = null
}
return false
}
实现的效果