<!DOCTYPE html> <html> <head> <title>move</title> </head> <style type="text/css"> .body_css { width: 100%; height: 100%; position: absolute; } .div_css { width: 100px; height: 100px; background-color: #000; position: absolute; left: 0px; top: 0px; color: #fff; user-select: none; } </style> <script type="text/javascript"> window.onload = function() { var d = document.getElementById('div'); var b = document.getElementById('body'); d.addEventListener("mousedown", function(ed) { var flag = true; var dl = d.offsetLeft; var dt = d.offsetTop; b.addEventListener("mousemove", function(em) { if (flag) { d.style.left = dl + em.clientX - ed.clientX + "px"; d.style.top = dt + em.clientY - ed.clientY + "px"; } }); b.addEventListener("mouseup", function() { flag = false; }); }); } </script> <body id="body" class="body_css"> <div id="div" class="div_css">鼠标点击我,进行拖拽</div> <a href="http://121.12.170.102:8280/wy/web/tuozhuai.html">效果访问地址</a> </body> </html>
效果预览地址: http://121.12.170.102:8280/wy/web/tuozhuai.html