<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { width: 100px; height: 100px; background-color: red; position: absolute; top: 0; cursor: pointer; } .left { left: 0; } .right { right: 0; } </style> </head> <body> <div id="div1" class="box left"></div> <div id="div2" class="box right"></div> <script> // 父类 class Drag { constructor(id) { this.oDiv = document.querySelector(id); this.disX = 0; this.disY = 0; this.init(); } init() { this.oDiv.onmousedown = function (ev) { this.disX = ev.clientX - this.oDiv.offsetLeft; this.disY = ev.clientY - this.oDiv.offsetTop; document.onmousemove = this.fnMove.bind(this); document.onmouseup = this.fnUp.bind(this); return false; }.bind(this); } fnMove(ev) { this.oDiv.style.left = ev.clientX - this.disX + "px"; this.oDiv.style.top = ev.clientY - this.disY + "px"; // 限制范围 if (this.oDiv.offsetLeft <= 0) { this.oDiv.style.left = 0; }else if(this.oDiv.offsetTop <= 0){ this.oDiv.style.top = 0; } } fnUp() { document.onmousemove = null; document.onmouseup = null; } } // 子类 —— 限制范围 class LimitDrag extends Drag { fnMove(ev) { super.fnMove(ev); } } // 调用 new Drag("#div1"); new LimitDrag("#div2"); </script> </body> </html>
