<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } #div1 { width: 100px; height: 100px; background: #0000FF; border: 1px solid black; position: absolute; } </style> <script> window.onload = function () { var oDiv = document.getElementById('div1'); drag(oDiv,1); } /** * @todo 拖拽元素在页面上移动 * @param node 要拖拽的元素 * @param flag 是否限制出界 0-不限制 1-限制 */ function drag(node, flag) { /* mousedown // 获取鼠标相对于拖拽元素的位置 var offsetX = e.clientX - node.offsetleft; var offsetY = e.clientY - node.offsettop; mousemove // 先获取鼠标相对于窗口的位置，然后减去相对于元素的位置，赋值给元素的左上 var nodeOffsetX = e.clientX - offsetX; var nodeOffsetY = e.clientY - offsetY; node.style.left = nodeOffsetX + 'px'; node.style.top = nodeOffsetY + 'px; mouseup 取消拖拽 */ window.onmousedown = function (eve) { var e = eve || window.event; var offsetX = e.clientX - node.offsetLeft; var offsetY = e.clientY - node.offsetTop; document.onmousemove = function (ev) { var e1 = ev || window.event; var nodeOffsetX = e1.clientX - offsetX; var nodeOffsetY = e1.clientY - offsetY; if (flag) { // 获取窗口的宽 var windowWidth = document.documentElement.clientWidth || document.body.clientWidth; // 获取窗口的高 var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; if (nodeOffsetX < 0) { nodeOffsetX = 0; } if (nodeOffsetX >= windowWidth - node.offsetWidth) { nodeOffsetX = windowWidth - node.offsetWidth; } if (nodeOffsetY < 0) { nodeOffsetY = 0; } if (nodeOffsetY >= windowHeight - node.offsetHeight) { nodeOffsetY = windowHeight - node.offsetHeight; } } node.style.left = nodeOffsetX + 'px'; node.style.top = nodeOffsetY + 'px'; } } document.onmouseup = function () { document.onmousemove = null; } } </script> </head> <body> <div id="div1"></div> </body> </html>