首页 > 代码库 > hmtl 手机上 div元素 拖动
hmtl 手机上 div元素 拖动
这是前端一个非常简单的功能，没什么复杂的原理：给div元素添加touch监听事件，然后改变div元素的位置状态。
下面是段简单的实现代码
<!doctype html><html><head> <meta charset="UTF-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0" name="viewport"/>
<meta name="format-detection" content="telephone = no"/> <title>手机上div元素 拖动</title></head><body><div id="indexbtn" style="width:100px;height:100px;background-color:black;position:absolute; "></div><script>window.onload=function(){ var indexbtn = document.getElementById("indexbtn"); indexbtn.addEventListener(‘touchstart‘,touch,false); indexbtn.addEventListener(‘touchmove‘,touch,false); indexbtn.addEventListener(‘touchend‘,touch,false); var x,y; function touch(event){ var event = event || window.event; switch(event.type){ case "touchstart": console.log(event.touches[0]); x = parseInt(event.touches[0].clientX); y = parseInt(event.touches[0].clientY); break; case "touchend": console.log(event.changedTouches[0]); y = parseInt(event.changedTouches[0].clientY); x = parseInt(event.changedTouches[0].clientX); indexbtn.style.top = y+"px"; indexbtn.style.left = x+"px"; break; case "touchmove": event.preventDefault(); y = parseInt(event.touches[0].clientY); x = parseInt(event.touches[0].clientX); indexbtn.style.top = y+"px"; indexbtn.style.left = x+"px"; break; } }}</script></body></html>
其实只是监听touchmove 也是可以达到效果的。而附加了touchstart 和touchend 是为以后更好的拓展，如果想在开始或者结束时做什么效果的，就可以在相应的地方添加代码。
学习心得：
作为小白，很多东西不太明白，所以我常常喜欢console.log() ，把相应的对象和方法在后台展示出来。有时候，会发现很多东西自己是用得到的。有时候一些参数自己不太明白，
例如：clientX与pageX等。最简单的方式，就是百度一下。而最快捷和最笨的方式就是：自己一个一个地尝试。
hmtl 手机上 div元素 拖动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。