1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 #box{ 8 100px; 9 height: 100px; 10 background: red; 11 position: absolute; 12 left: 20px; 13 top: 20px; 14 } 15 </style> 16 </head> 17 <body> 18 <div id = "box"></div> 19 20 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 21 <script type="text/javascript"> 22 $(function () { 23 $("#box").mousedown(function (e) { 24 var disX = e.offsetX; 25 var disY = e.offsetY; 26 27 $(document).mousemove(function (e) { 28 $("#box").css( {left: e.pageX-disX, top: e.pageY-disY} ); 29 }); 30 31 $(document).mouseup(function () { 32 $(document).off("mousemove mouseup"); 33 }); 34 }); 35 36 }) 37 </script> 38 </body> 39 </html>
