<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload=function(){ var clientX; var clientY; var left; var top; var bool=false var aa=document.getElementsByClassName('aa')[0] aa.addEventListener('mousedown',function(e){ bool=true clientX=e.clientX clientY=e.clientY left=parseInt(aa.style.left) top=parseInt(aa.style.top) }) document.addEventListener('mouseup',function(){ bool=false }) document.addEventListener('mousemove',function(e){ if(bool){ console.log(clientY,e.pageY,top) aa.style.left=(e.pageX-clientX)+left+"px" aa.style.top=e.pageY-clientY+top+"px" } }) } </script> <style> body{ margin:0;padding:0; } </style></head><body> <div class="aa" style="width:200px;height:200px;background:red;left:0;top:0;position: relative;"></div></body></html>
