如何用js在网页中实现鼠标拖拽功能

使用步骤

1.引入库

代码如下（示例）：

//首先在body中创建一个盒子
<div>

</div>
//js代码
<script>

    var div = document.querySelector('div');

    var divX = 0;
    var divY = 0;


    //1.在div上按下鼠标
    div.onmousedown = function () {
        //记录鼠标在盒子内的位置
        divX = event.offsetX;
        divY = event.offsetY;
        console.log('鼠标在盒子内的位置', divX, divY)
        //2.在页面内进行移动  (点击div后添加鼠标移动事件)
        document.onmousemove = function () {
            //试试获取鼠标的位置
            console.log('鼠标在窗口的位置', event.clientX, event.clientY)
            div.style.left = event.clientX - divX + 'px'
            div.style.top = event.clientY - divY + 'px'

        }
    }

    //3.在目标位置松开鼠标
    document.onmouseup = function () {
        //松开鼠标时清除鼠标移动事件
        document.onmousemove = null


    }


</script>

2.CSS代码

代码如下（示例）：

 div {
            width: 200px;
            height: 200px;
            background-color: #ABCDEF;
            position: absolute;
            border-radius: 50%;
        }

这些数据都是我随机设置的，使用时可以通过不同需要去修改。

---