DOM elements on the page to achieve two operations, by way of inheritance
class Drag{
builder (s) {
this.ele = it;
this.m = this.move.bind(this);
this.u = this.up.bind(this);
this.addEvent();
}
addEvent(){
this.ele.addEventListener("mousedown",this.down.bind(this))
}
down(eve){
var e = eve || window.event;
this.x = e.offsetX;
this.y = e.offsetY;
document.addEventListener("mousemove",this.m);
document.addEventListener("mouseup",this.u);
}
move(eve){
var e = eve || window.event;
this.ele.style.left = e.clientX - this.x + "px";
this.ele.style.top = e.clientY - this.y + "px";
}
up(){
document.removeEventListener("mousemove",this.m);
document.removeEventListener("mouseup",this.u);
}
}
class SmallDrag extends Drag{
builder (s) {
super (it)
}
move(eve){
var e = eve || window.event;
var l = e.clientX - this.x;
var t = e.clientY - this.y;
if(l < 0){
l = 0;
}
if(t < 0){
t = 0;
}
this.ele.style.left = l + "px";
this.ele.style.top = t + "px";
}
}
var obox1 = document.getElementById("box1")
var obox2 = document.getElementById("box2")
new Drag(obox1);
new SmallDrag(obox2);