<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 100px; height: 100px; position: absolute; top: 0; } div:nth-child(1) { left: 0; background: red; } div:nth-child(2) { left: 100px; background: green; } div:nth-child(3) { left: 200px; background: pink; } div:nth-child(4) { left: 300px; background: yellow; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <script src="js/drag.js"></script> <script> // 拖拽函数封装完毕后引入，可以给多个div同时绑定 var div = document.getElementsByTagName('div'); // 循环获得每一个div for (var i = 0; i < div.length; i++) { drag(div[i]); } </script> </body> </html>
function drag(ele) { ele.onmousedown = function (ev) { // 设置全局捕获，兼容IE8及以下 if (ele.setCapture) { ele.setCapture(); } var ev = ev || window.event; // 控制盒子的移动范围，就要先得到可视区的宽和高 var clientW = document.documentElement.clientWidth; var clientH = document.documentElement.clientHeight; // 获取盒子的宽高 var boxW = ele.clientWidth; var boxH = ele.clientHeight; // 鼠标到盒子的距离 // ev.clientX/ev.clientY 鼠标到可视窗口的左、上距离 // box.offsetLeft/box.offsetTop box到父级body的左、上距离 // disX/disY 鼠标到盒子的左、上距离 var disX = ev.clientX - ele.offsetLeft; var disY = ev.clientY - ele.offsetTop; // 改进：鼠标拖动过快，会丢失盒子 // 把box下的鼠标移动事件换成了document下的鼠标移动事件，因为box的事件最终会冒泡至document document.onmousemove = function (ev) { var ev = ev || event; var L = ev.clientX - disX; // 盒子到左边的距离 var T = ev.clientY - disY; // 盒子到上边的距离 // 判断L和T的位置距离再赋值 if (L < 0) { L = 0; } else if (L > clientW - boxW) { L = clientw - disY; } if (T < 0) { T = 0; } else if (T > clientH - boxH) { T = clientH - boxH; } // 将L和T赋值给box的left和top ele.style.left = L + 'px'; ele.style.top = T + 'px'; } // 抬起 document.onmouseup = function () { // 鼠标抬起时，给鼠标移动和抬起分别设置为空 document.onmousemove = null; document.onmouseup = null; // 释放全局捕获，兼容IE8及以下 if (ele.releaseCapture) { ele.releaseCapture(); } } // 图片拖动产生副本的现象是浏览器默认行为 // return false可以阻止浏览器的默认行为 return false; } }