<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div
{
width: 50px;
height: 50px;
background-color: greenyellow;
position: absolute;
}
</style>
<!-- <script src="js/Utils.js"></script>-->
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var divs=document.querySelectorAll("div");
for(var i=0;i<divs.length;i++){
divs[i].addEventListener("mousedown",mouseMoveHandler);
}
function mouseMoveHandler(e) {
if(e.type==="mousedown"){
e.preventDefault();
document.point={
x:e.offsetX,
y:e.offsetY
};
document.div=this;
document.addEventListener("mousemove",mouseMoveHandler);
document.addEventListener("mouseup",mouseMoveHandler);
}else if(e.type==="mousemove"){
this.div.style.left=e.clientX-this.point.x+"px";
this.div.style.top=e.clientY-this.point.y+"px";
}else if(e.type==="mouseup"){
this.removeEventListener("mousemove",mouseMoveHandler);
this.removeEventListener("mouseup",mouseMoveHandler);
}
}
</script>
</body>
</html>