JS实现拖拽效果

HTML部分

<div id="container" >
    <div id="drag">
        拖拽区域
    </div>
</div>

 

CSS部分：

#container {
    width: 300px;
       /* overflow: hidden有效阻止鼠标超出拖动范围而触发mousemove回调 */
    overflow: hidden;
    position: relative;
    height: 300px;
    background-color: #ddd
}

#drag {
    color: white;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    position: absolute;
    user-select: none;
    cursor: pointer;
    background-color: rgb(0, 174, 255);
}

JavaScript部分：

let container = document.getElementById('container')
let drag = document.getElementById('drag')
drag.style.left = "0px"
drag.style.top = "0"
drag.onmousedown = function (event) {
    console.log(event.clientX)
    let clientX = parseInt(event.clientX)//鼠标事件的x坐标位置
    let clientY = parseInt(event.clientY)//鼠标事件的y坐标位置
    let currentLeft = parseInt(drag.style.left)
    let currentTop = parseInt(drag.style.top)
    document.onmousemove = function (event) {
        console.log(event.clientX)
        let left = event.clientX - clientX + currentLeft
        let top = event.clientY - clientY + currentTop
        //边缘判断
        if (left > container.clientWidth - drag.clientWidth)
            left = container.clientWidth - drag.clientWidth
        if (left < 0)
            left = 0
        if (top > container.clientHeight - drag.clientHeight)
            top = container.clientHeight - drag.clientHeight
        if (top < 0)
            top = 0
        drag.style.left = left + "px"
        drag.style.top = top + "px"
    }

    //监听整个文档区域，避免拖拽到边缘鼠标放开没有监听到回调
    document.onmouseup = function () {
        document.onmousemove = null
    }
}

 

 效果