拖拽两个贴贴的div

HTML结构

                                   
       
         你可以不用假装       
       
         
         
12321
       
     
     
          

核心JS代码

let control = document.querySelector(".item-right-control"); let box = document.querySelector(".item-right"); let explain = document.querySelector(".text"); control.addEventListener("mousedown", (e) => {   document.body.style.userSelect = "none";   document.addEventListener("mousemove", onMouseMove);   document.addEventListener("mouseup", onMouseUp); }); function onMouseMove(e) {   if (window.innerWidth - e.screenX >= 300 && window.innerWidth - e.screenX <= 1200) {     box.style.width = box.offsetWidth + (box.offsetLeft - e.screenX) + "px";   } } function onMouseUp() {   document.body.style.userSelect = "auto";   document.removeEventListener("mousemove", onMouseMove);   document.removeEventListener("mouseup", onMouseUp); } 

完整JS代码

let control = document.querySelector(".item-right-control"); let box = document.querySelector(".item-right"); let explain = document.querySelector(".text"); control.addEventListener("mousedown", (e) => {   document.body.style.userSelect = "none";   explain.innerHTML = `     需要改变宽度的盒子距离最左侧屏幕的距离：${box.offsetLeft}
     盒子的宽度：${box.offsetWidth}
   `;   document.addEventListener("mousemove", onMouseMove);   document.addEventListener("mouseup", onMouseUp); }); explain.innerHTML = `     需要改变宽度的盒子距离最左侧屏幕的距离：${box.offsetLeft}
     盒子的宽度：${box.offsetWidth}
   `; function onMouseMove(e) {   explain.innerHTML = `     需要改变宽度的盒子距离最左侧屏幕的距离：${box.offsetLeft}
     盒子的宽度：${box.offsetWidth}
     盒子改变后的宽度：${box.offsetWidth + box.offsetLeft - e.screenX}
     鼠标相较于盒子控件的距离：${box.offsetLeft - e.screenX}
     视口宽度：${window.innerWidth}
     是否可以拖动：${window.innerWidth - box.offsetLeft >= 300}   `;   if (window.innerWidth - e.screenX >= 300 && window.innerWidth - e.screenX <= 1200) {     box.style.width = box.offsetWidth + (box.offsetLeft - e.screenX) + "px";   } }  function onMouseUp() {   document.body.style.userSelect = "auto";   document.removeEventListener("mousemove", onMouseMove);   document.removeEventListener("mouseup", onMouseUp); }