纯js实现拖拽弹窗代码

纯js实现拖拽弹窗的代码。思路：

鼠标点下(onmousedown):该事件内部要添加两个事件 ，移动事件 抬起事件(此事件内部含有移除移动事件)

    1、获取鼠标在元素内的坐标（pageX Y ,对象距离左边的距离offsetLeft，相减， 就是鼠标点在元素内的位置的坐标）

    2、鼠标移动弹层随移动(onmousemove), 始终获取对象距离左边和上边的坐标：需要获取pageX，pageY - 鼠标在元素内的位置

    3、鼠标抬起：停止移动(移除移动事件)

来看张图就明白了了，黄色的 x y坐标 在点下和移动时，在颜色块区域中的位置是不变的。

1、css

.login_btn{
    width: 100px;
    height: 40px;
    background: #48D1CC;
    text-align: center;
    line-height: 40px;
    border-radius: 5px;
    cursor: pointer;
    border: 0
}
.bg{
    position: fixed;
    top:0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    display: none;
}
.login{
    width: 512px;
    height: 340px;
    background: #F0FFFF;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 99;
    transform: translate(-50%,-50%);
}
.login_header{
    width: 100%;
    height: 40px;
    background: #00BFFF;
    line-height: 40px;
}
.login_header span{
    float: right;
    display: block;
    margin-top: 5px;
    margin-right: 10px;
    cursor: pointer;
    font-family: 'arial';
}

2.html

<div id="content">
    <button class="login_btn" onclick="loginLink();">
        登 录
    </button>
    <div class="bg">            
        <div class="login">
            <div class="login_header"><span onclick="closebtn();">X</span></div>
            此弹层可以拖拽
        </div>
    </div>
</div>

3.js

var bg = document.querySelector('.bg');
//弹出层
function loginLink() {          
    bg.style.display = 'block'
}
//关闭弹层
function closebtn(){
    bg.style.display = 'none';
}
var loginDiv = document.querySelector('.login');
//鼠标点下  添加移动事件
loginDiv.addEventListener('mousedown',function(e){
    var x = e.pageX- loginDiv.offsetLeft;
    var y = e.pageY - loginDiv.offsetTop;
    function move(e){
        loginDiv.style.left = e.pageX- x +'px';
        loginDiv.style.top = e.pageY - y +'px';
    }
    //鼠标点下，添加移动事件
    this.addEventListener('mousemove',move);
    //鼠标抬起 移除移动事件
    loginDiv.addEventListener('mouseup',function(){
        this.removeEventListener('mousemove',move)
    });
})

本文为CSDN博主「淡泊-宁静致远」的原创文章，原文链接：https://blog.csdn.net/dingdinglaila/article/details/106670150