<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #wrap { position: relative; border: 1px solid #000; width: 800px; height: 500px; } #drog { position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: red; cursor: move; } </style> </head> <body> <p id="wrap"> <p id="drog"></p> </p> <script type="text/javascript" src="startmove.js?1.1.10"></script> <script type="text/javascript"> (function(){ var drog = document.querySelector('#drog'); /* 1.记录按下的时候的鼠标位置 2.记录按下的时候元素的位置 */ drog.onmousedown = function(e){ var startElY = css(drog,"top"); var startElX = css(drog,"left"); var startMouseX = e.clientX; var startMouseY = e.clientY; /* 求出鼠标移动的距离, 操作元素也移动相应的距离 为了可以一直跟随,所以添加给document */ document.onmousemove = function(e){ var nowMouseX = e.clientX; var nowMouseY = e.clientY; var disX = nowMouseX - startMouseX; var disY = nowMouseY - startMouseY; var x = disX + startElX; var y = disY + startElY; css(drog,"left",x); css(drog,"top",y); }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; }; }; })(); </script> </body> </html>
以上就是一个小demo之“拖拽”效果的实现的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号