<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: red;position: absolute;left: 0;top: 0;"></div>
<div style="width: 100px;height: 100px;background-color: yellow;position: absolute;left: 0;top: 0;"></div>
<script>
var div = document.getElementsByTagName('div')[0];
var div1 = document.getElementsByTagName('div')[1];
drag(div);
drag(div1);
function drag(elem) {
var disX,
disY;
elem.onmousedown = function (e) {
var e = e || window.event
disX = e.pageX - parseInt(elem.style.left);
disY = e.pageY - parseInt(elem.style.top);
document.onmousemove = function (e) {
var e = e || window.event;
console.log(e);
elem.style.left = e.pageX - disX + "px";
elem.style.top = e.pageY - disY + "px";
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
}
</script>
</body>
</html>
