<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--<script type="text/javascript" src="jquery-3.3.1.js"></script>--> <!--为了兼容ie678，我们使用原生低版本的jquery--> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(function () { var move = false; var x,y; $("div").mousedown(function (event) { move = true; var event = event || window.event; //div当前水平位置 x = event.clientX - $(this).offset().left; //div当前竖直位置 y = event.clientY - $(this).offset().top; $(document).mousemove(function(event){ if(move){ var event = event || window.event; $("div").css({"left":event.clientX-x,"top":event.clientY-y}) } }).mouseup(function () { move=false; }) }) }) </script> <style> div{ width: 100px; height: 100px; background: red; position: absolute; } </style> </head> <body> <div></div> </body> </html>
原文：https://www.cnblogs.com/alex-xxc/p/9738825.html