es5 托拽功能
document.getElementById('box').onmousedown = function (e) {
var startLeft = box.offsetLeft;
var startTop = box.offsetTop;
var startX = e.clientX;
var startY = e.clientY;
document.onmousemove = function (e) {
var endX = e.clientX;
var endY = e.clientY;
var distX = startLeft + (endX - startX);
var distY = startTop + (endY - startY);
box.style.left = distX + 'px';
box.style.top = distY + 'px';
console.log('正在移动。。。。。')
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
es6 class 拖拽功能
class drag{
constructor(id) {
this.div=document.querySelector(id)
this.disX = 0;
this.disY = 0;
this.init();
}
init(){
this.div.onmousedown=function(ev){
this.disX = ev.clientX-this.div.offsetLeft;
this.disY = ev.clientY-this.div.offsetTop;
document.onmousemove = this.fnMove.bind(this);
document.onmouseup = this.fnUp.bind(this);
return false;
}.bind(this)
}
fnMove(ev){
this.div.style.left=ev.clientX-this.disX+'px';
this.div.style.top = ev.clientY-this.disY+'px'
}
fnUp(){
document.onmousemove=null;
document.onmouseup = null;
}
}
new drag('#div1')
extends继承
class ckDrag extends Drag{
fnMove(ev){
super.fnMove(ev);
if(this.oDiv.offsetLeft<=0){
this.oDiv.style.left =0;
}
}
}
new ckDrag('#div2');