<!doctype html> <html> <head> <meta charset="utf-8"> <title>js--div自由拖动（在body可以自由拖动）</title> <style> .mydiv { position: fixed; width: 400px; height: 400px; background-color: blue; filter: Alpha(opacity=50); opacity: 0.5; } </style> </head> <body> <div id="drag" class="mydiv" style="left:0px;top: 20px;"></div> <script> var posX; var posY; fdrag = document.getElementById("drag"); fdrag.onmousedown = function(e) { posX = event.x - fdrag.offsetLeft; //获得横坐标x posY = event.y - fdrag.offsetTop; //获得纵坐标y document.onmousemove = mousemove; //调用函数，只要一直按着按钮就能一直调用 } document.onmouseup = function() { document.onmousemove = null; //鼠标举起，停止 } function mousemove(ev) { if (ev == null) ev = window.event; //IE fdrag.style.left = (ev.clientX - posX) + "px"; fdrag.style.top = (ev.clientY - posY) + "px"; } </script> </body> </html>
div自由拖动（pc）
2023-09-15
29
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
div自由拖动（pc）
目录
相关文章
|
3月前
|
前端开发
|
4月前
|
小程序
JavaScript
前端开发
|
5月前
|
小程序
前端开发
Android开发
|
11月前
|
11月前
|
前端开发
算法
|
编解码
JavaScript
|
编解码
前端开发
UED
|
JavaScript
