js principiante al arrastrar el cuadro
Este es un simple pequeño ejemplo, para calcular las coordenadas de los principales ejercicios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1 {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
.div0{
width:600px;
height:600px;
border:1px solid #000;
position:relative;
left:100px;
top:100px;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</div>
<script>
var divs = document.querySelectorAll(".div1");
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener("mousedown", mouseHandler);
}
function mouseHandler(e) {
switch (e.type) {
case "mousedown":
e.preventDefault();
document.elem = this;
document.x = e.offsetX;
document.y = e.offsetY;
document.addEventListener("mousemove", mouseHandler);
document.addEventListener("mouseup", mouseHandler);
break;
case "mousemove":
var rect=this.elem.parentElement.getBoundingClientRect();
this.elem.style.left = e.clientX - rect.x-this.x + "px";
this.elem.style.top = e.clientY - rect.y-this.y + "px";
if(this.elem.offsetLeft<0) this.elem.style.left="0px";
if(this.elem.offsetTop<0) this.elem.style.top="0px";
if(this.elem.offsetLeft>rect.width-this.elem.offsetWidth) this.elem.style.left=rect.width-this.elem.offsetWidth+"px";
if(this.elem.offsetTop>rect.height-this.elem.offsetHeight) this.elem.style.top=rect.height-this.elem.offsetHeight+"px";
break;
case "mouseup":
this.removeEventListener("mousemove", mouseHandler);
this.removeEventListener("mouseup", mouseHandler);
break;
}
}
</script>
</body>
</html>
event.clientX, event.clientY
鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
event.offsetX, event.offsetY
鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。
Element.getBoundingClientRect ()
方法返回元素的大小及其相对于视口的位置
Diagrama (interesados pueden tratar de arrastrar inferior):
