鼠标按下时检测鼠标移动

Question

如何在鼠标按下时检测移动鼠标？ 我在较小的屏幕上有 2 个盒子，其中一个在屏幕外，所以我习惯用鼠标抓住它

当我按住鼠标左键时，我想检测鼠标何时向右或向左移动

const box = document.querySelector('.boxes')

let mouseIsDown = false;

box.addEventListener('mousedown',()=> {
  mouseIsDown = true;

    if(mouseIsDown) {
     console.log('Nora!')
   
       box.classList.add('grab')
     
        box.addEventListener("mousemove", detectDirection);   
      
            let exX = 0;

            function detectDirection(e) { 
                console.log(e.buttons)

                if (e.buttons === 1 && exX < e.pageX) {
            
                    box.classList.add('move-right')
        
                } else if(e.buttons ===1 && exX > e.pageX) {
                    box.classList.add('move-left')
                    // console.log('left')
                } 
                exX = e.pageX;
            } 
    }
});

box.addEventListener('mouseup', ()=> {
    box.classList.remove('move-left')
    box.classList.remove('move-right')
    box.classList.remove('grab')
 
  mouseIsDown = false;
 
});

.boxes {
  display: flex;
  width: 100%;
  transition: 1s;
  position: relative;
}

.inner-box {
  background-color: #fff;
  box-shadow: 0 1px 10px rgba(1, 1, 1, 0.1);
  border-radius: 5px;
  padding: 1.5rem 0.5rem;
  padding-left: 1rem;
  cursor: grab;
}
.box-1 {
  width: 100%;
  margin-right: 1rem;
}

.box-2 {
  position: absolute;
  left: 99%;

}

.grab {
  cursor: grabbing;
}


.move-left {
  margin-left: 30rem;
}
.move-right {
  margin-right: 48rem;
}

        <div class="boxes">
            <div class="inner-box box-1">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
                </p>

            </div>
            <div class="inner-box box-2">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
                </p>
            </div>
         
        </div>

但是正如您所见，它可能不起作用，即使我离开左键它也会移动，它也不能准确地检测左右..我想要的是当光标抓住时我可以将框向左移动或者正确的时候是（光标：抓取）不能移动它

Answer 1

确保所有mousedown 和mouseup 正在切换变量mouseIsDown。你的mousemove 应该是一个独立的eventlistener。还检查了 px 的边距，并更新了相对于鼠标移动量的框边距。另外我建议不要使用边距来移动框使用位置。

const box = document.querySelector('.boxes')
box.style.marginRight = "1px"
box.style.marginLeft = "1px"
let exX = 0;

let mouseIsDown = false;

box.addEventListener('mousedown',(e)=> {
  exX = e.pageX
  mouseIsDown = true;


});
     
window.addEventListener("mousemove", detectDirection);   
 
window.addEventListener('mouseup', ()=> {
    box.classList.remove('grab')
 
  mouseIsDown = false;
 
});
function detectDirection(e) { 
             if(mouseIsDown) {
                   box.classList.add('grab')

                if (e.buttons === 1 && exX > e.pageX) {
                    var diff = exX - e.pageX
                    box.classList.add('move-right')
                    box.style.marginRight = (parseInt(box.style.marginRight.replace('px',''))+diff)+"px"
                    box.style.marginLeft = (parseInt(box.style.marginLeft.replace('px',''))-diff)+"px"

        
                } else if(e.buttons ===1 && exX < e.pageX) {
                    var diff = e.pageX-exX;
                    box.classList.add('move-left')
                    box.style.marginRight = (parseInt(box.style.marginRight.replace('px',''))-diff)+"px"
                    box.style.marginLeft = (parseInt(box.style.marginLeft.replace('px',''))+diff)+"px"
                    // console.log('left')
                } 
                exX = e.pageX;
            } 
           }

.boxes {
  display: flex;
  width: 100%;
  transition: 1s;
  position: relative;
    margin-right: 1rem;
    margin-left: 1rem;
}

.inner-box {
  background-color: #fff;
  box-shadow: 0 1px 10px rgba(1, 1, 1, 0.1);
  border-radius: 5px;
  padding: 1.5rem 0.5rem;
  padding-left: 1rem;
  cursor: grab;
    margin-right: 1rem;
    margin-left: 1rem;
}
.box-1 {
  width: 100%;
  margin-right: 1rem;
    margin-left: 1rem;
}

.box-2 {
  position: absolute;
  left: 99%;

}

.grab {
  cursor: grabbing;
}

<div class="boxes">
            <div class="inner-box box-1">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
                </p>

            </div>
            <div class="inner-box box-2">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
                </p>
            </div>
         
        </div>