如图:

代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style> * {
     margin: 0; padding: 0; } .box {
     width: 100px; height: 100px; background: red; position: absolute; top: 0; color: white; } .left {
     left: 0; } .right {
     right: 0; } </style>
</head>
<body>

<div id="div1" class="box left">DIV1</div>

<div id="div2" class="box right">DIV2</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'; } 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>