<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>百度拖拽</title> <style> *{ padding: 0; margin: 0; } #wrap{ position: absolute; left:0; top:0; width: 300px; height: 400px; background:#0cc; cursor: move; } </style> </head> <body> <div id="wrap"> </div> <script> var wrap = document.getElementById("wrap"); // 水平垂直居中=(屏幕宽(高)度-盒子宽(高)度)/2 wrap.style.left = (document.documentElement.clientWidth - wrap.offsetWidth)/2 + "px"; wrap.style.top = (document.documentElement.clientHeight - wrap.offsetHeight)/2 + "px"; //这里只用到常用的三个鼠标事件：onmousedown(鼠标按下去时触发)、onmousemove(鼠标移动时触发)、onmouseup(鼠标松开时触发) wrap.onmousedown = function(e){//鼠标按下去时 var event = e || window.event;//event是一个事件对象，一个全局对象。e(现代浏览器)，window.event(低版本的IE浏览器) var oW =event.clientX - wrap.offsetLeft;//X轴盒子的偏移量 = 当前鼠标点击X轴坐标 - 盒子的left值 var oH = event.clientY - wrap.offsetTop;//Y轴盒子的偏移量 = 当前鼠标点击Y轴坐标 - 盒子的top值 document.onmousemove = function(e){//鼠标移动时 var event = e || window.event; var bLeft = event.clientX - oW;//鼠标移动的left偏移量 = 当前移动的X轴坐标 - X轴盒子的偏移量 var bTop = event.clientY - oH; //鼠标移动的top偏移量 = 当前移动的Y轴坐标 - Y轴盒子的偏移量 var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;//获取文档水平方向滚动条位置 var scrollY = document.documentElement.scrollTop || document.body.scrollTop;//获取文档垂直方向滚动条位置 //scrollX和scrollY为0当出现滚动条时才会大于0 //判断屏幕的边界目的是不让盒子超出屏幕的宽(高)度 if(bLeft < scrollX){ bLeft = scrollX;//盒子的偏移量left=scrollX } else if(bLeft > document.documentElement.clientWidth - wrap.offsetWidth +scrollX){ bLeft = document.documentElement.clientWidth - wrap.offsetWidth +scrollX;//盒子的偏移量left = 屏幕宽度 - 盒子的宽度+scrollx(滚动条值) } if(bTop < scrollY){ bTop = scrollY;//盒子的偏移量top=scrollX } else if(bTop > document.documentElement.clientHeight - wrap.offsetHeight +scrollY){ bTop = document.documentElement.clientHeight - wrap.offsetHeight +scrollY;////盒子的偏移量top = 屏幕高度 - 盒子的高度+scrollY(滚动条值) } wrap.style.left = bLeft + "px";//盒子的left偏移量 wrap.style.top = bTop + "px";//盒子的top偏移量 } } document.onmouseup = function(){ document.onmousemove = null;//鼠标松开时解除onmousemove } </script> </body> </html>