拖拽原理 HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ position: absolute; left: 100px; top: 100px; width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="box"></div> <script type="text/javascript"> var oBox = document.getElementById("box") oBox.onmousedown = function(ev){ var ev = ev || event // console.log(oBox.offsetLeft,oBox.offsetTop,ev.clientX,ev.clientY) var difX = ev.clientX - oBox.offsetLeft var difY = ev.clientY - oBox.offsetTop // 马上移动鼠标 // 运用事件冒泡 document.onmousemove = function(ev){ var ev = ev || event var oBox_left = ev.clientX - difX var oBox_top = ev.clientY - difY oBox.style.left = oBox_left + "px" oBox.style.top = oBox_top + "px" } document.onmouseup = function(ev){ // 让鼠标不移动 document.onmousemove = null } } </script> </body> </html>