<!DOCTYPE html> <html lang="zh-CN">
<head> <meta charset="UTF-8"> <title>Document</title> <style> #wrap { width: 100px; height: 100px; background-color: green; position: absolute; left: 100px; top: 100px; z-index: 100; } </style> </head>
<body> <div id="wrap"></div> </body> <script> wrap.onmousedown = function (e) { console.log(e); var e = e || window.event; var w = e.clientX; var h = e.clientY; console.log('获取按下的位置', 'clientX', w, 'clientY', h); var ex = w - wrap.offsetLeft; var ey = h - wrap.offsetTop;
document.onmousemove = function (h) { var h = h || window.event; var w1 = h.clientX; var h1 = h.clientY; console.log('onmousemove', 'w1', w1, 'h1', h1); wrap.style.left = (w1 - ex) + "px"; wrap.style.top = (h1 - ey) + "px";
} }
wrap.onmouseup = function () { document.onmousemove = null; } </script>
</html>
|