class文法関連ノート
1643 ワード
classで書いた小さなdemo
Title
class Drag{
constructor(id){
this.oDiv = document.querySelector(id);
this.disX = 0;
this.disY = 0;
this.init()
}
init(){
this.oDiv.onmousedown = function(event){
this.disX = event.clientX - this.oDiv.offsetLeft;
this.disY = event.clientY - this.oDiv.offsetTop;
document.onmousemove = this.fnMove.bind(this);
document.onmouseup = this.fnUp.bind(this);
}.bind(this);
}
fnMove(event){
this.oDiv.style.left = event.clientX - this.disX + 'px';
this.oDiv.style.top = event.clientY - this.disY + 'px';
}
fnUp(){
document.onmousemove = null;
document.onmouseup = null;
}
}
//
class LimitDrag extends Drag{
fnMove(event){
super.fnMove(event);// fnMove
//
if(this.oDiv.offsetLeft <= 0){
this.oDiv.style.left = 0;
}
if(this.oDiv.offsetTop <= 0){
this.oDiv.style.top = 0;
}
}
}
new Drag('#div1')
new LimitDrag('#div2')