<!DOCTYPE html> <html lang="en" style="font-size: 30px"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{padding: 0px;margin: 0px;} div { width: 10rem; height: 10rem; background: black; } </style> </head> <body style="font-size: 40px"> <div style="font-size: 50px"></div> <script type="text/javascript"> var div=document.querySelector("div"); console.log(div.offsetWidth,div.offsetHeight); </script> </body> </html>
注意点,在html上设置font-size是rem的前提.计算方式.3010=300 3010=300
用touch做js拖拽.记住，touch只在移动端有效.
问题：为什么用定位流做?
因为
问题2：touches[0]是什么意思？
是一次只有一个手指触碰.
问题3：为什么前面加e，因为是事件这个领域里面的属性啊.
问题4,拖拽怎么做？
第一;我举个例子把，好吧.
例如start的时候div在100，100，鼠标在150 150的地点,move的时候在300 300，鼠标在350 350 的位置.
第二：那么
start的时候第一个图片的结果代表div的边缘到鼠标的距离.(开始的时候)
move的时候第二个图片的结果代表div边缘到可视区的距离.（移动后的）
最终达到了拖拽的目的.
核心：开始是开始的xy坐标,移动是移动的xy坐标.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} body{overflow: hidden;} #div1{width: 200px;height: 200px;background: black; position: absolute; } #div2{ position: absolute; width: 50px;height: 50px; background: red;left: 500px;top: 500px; } </style> </head> <body> <div id='div1'> </div> <script type="text/javascript"> var div1=document.querySelector("#div1"); var l = t = 0; div1.addEventListener("touchstart",function(e) { l=e.touches[0].clientX-div1.offsetLeft; t = e.touches[0].clientY - div1.offsetTop; },false); document.addEventListener("touchmove",function(e) { div1.style.left=e.touches[0].clientX-l+"px"; div1.style.top = e.touches[0].clientY - t + 'px'; },false); </script> </body> </html>
