[자바스크립트]드래그해서 움직이는 박스 만들기

적축 기계식 키보드가왔는데 키감이 너무 좋아서 뭔가

코딩을 너무 하고싶었다,

그래서 만들고싶었던걸 한번 만들어 봤는데

이게 되네 싶었다.

const moveBox = document.querySelector('div');
let bool = false;
let offsetleft;
moveBox.addEventListener('mousedown', (e)=>{
    moveBox.style.background = "red"
    let where = e.offsetX;
    offsetleft = where;
    bool = true
    boxmovement(e, where)
})
document.addEventListener('mousemove', (e)=>{
    if(bool){
        offsetleft
        boxmovement(e, offsetleft)
    }
})
moveBox.addEventListener('mouseenter', ()=>{
    bool = false;
})
moveBox.addEventListener('mouseup', (e)=>{
    moveBox.style.background = "black"
    bool = false
})

function boxmovement(e, a){
    let value = a
    if(bool){
        let mouselocated = e.pageX;
        console.log(mouselocated)
        console.log(value)
        moveBox.style.left = (mouselocated - value) + "px"

    }
}

타겟으로 잡은놈은 div박스이며 사실 이거 하고도 이게 되다니 하면서 놀랐다.

X축으로만 움직이는 박스이다.