<!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;
}
}
