一个页面有两个元素，都有拖拽，一个有边界限定，一个没有边界限定 // 注意： // 因为利用事件监听绑定和删除事件 // 所以得有事件处理函数的名字 // 因为需要给事件处理函数加名字 // 所以要将事件处理函数单独封装 // 因为单独封装 // 所以导致事件处理函数中的this不再指向实例 // 因为时间处理函数中的this不再指向实例 // 所以需要使用bind方法改变this指向 // 因为bind每次执行会返回新函数 // 所以需要提前将要改变this指向的函数使用bind处理好
class Drag{ constructor(ele){ this.ele = ele; this.m = this.move.bind(this); this.u = this.up.bind(this); this.addEvent(); } addEvent(){ this.ele.addEventListener("mousedown",this.down(this)) } down(that){ return function(e){ that.x = e.offsetX; that.y = e.offsetY; // console.log(that) document.addEventListener("mousemove",that.m) document.addEventListener("mouseup",that.u) } } move(e){ 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{ constructor(ele){ super(ele); } move(e){ var l = e.clientX - this.x; var t = e.clientY - this.y; if(l<0) l=0; if(t<0) t=0; if(l > document.documentElement.clientWidth - this.ele.offsetWidth){ l = document.documentElement.clientWidth - this.ele.offsetWidth } this.ele.style.left = l + "px"; this.ele.style.top = t + "px"; } } // 一个页面有两个元素，都有拖拽，一个有边界限定，一个没有边界限定 var obox1 = document.querySelector(".box1"); var obox2 = document.querySelector(".box2"); new Drag(obox1); new SmallDrag(obox2);