5.JS实现简单拖拽效果

最新推荐文章于 2023-10-17 19:40:46 发布

半夜追风人

最新推荐文章于 2023-10-17 19:40:46 发布

阅读量192

点赞数 1

分类专栏：前端面试准备中前端面试题

本文链接：https://blog.csdn.net/m0_46439976/article/details/120330732

版权

JavaScript 拖放登录框事件监听 DOM操作

关键词由CSDN通过智能技术生成

前端面试题同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

前端

20 篇文章 0 订阅

订阅专栏

面试准备中

17 篇文章 0 订阅

订阅专栏

1.拖拽步骤描述：鼠标按下–>鼠标移动—>鼠标抬起（停止移动）

2.实现步骤：监听鼠标在目标元素内的按下事件，按下就设置鼠标移动事件，开始拖拽，当鼠标抬起时，取消移动事件

3.代码如下：
//用到事件：onmousedown、onmousemove、onmouseup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS实现简单拖拽</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .mask{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
        }

        .btn{
            display: inline-block;
            padding: 20px 20px;
            vertical-align: baseline;
            background-color: #ffccaa;
            color: black;
        }

        .login{
            width: 400px;
            height: 300px;
            background-color: #42b983;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            display: none;
            cursor: move;
        }

        .close{
            position: absolute;
            right: 0;
            top: 0;
            background-color: red;
            width: 60px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!--蒙板-->
    <div class="mask"></div>
    <!--登录按钮-->
    <a href="#" class="btn">登录</a>
    <!--登录框-->
    <div class="login">
      <span class="close">关闭</span>
    </div>
</body>

<script>
    document.addEventListener('DOMContentLoaded',function (){
        let btn=document.querySelector('.btn')
        let mask=document.querySelector('.mask')
        let loginBox=document.querySelector('.login')
        let close=document.querySelector('.close')
        btn.onclick=function (e){
            e=e || window.event
            mask.style.display="block"
            loginBox.style.display="block"
            //阻止默认事件
            e.preventDefault()||(e.returnValue=false)
        }

        close.onclick=function (e){
            e=e || window.event
            mask.style.display="none"
            loginBox.style.display="none"
        }

        //监听登录盒子的鼠标按下事件
        loginBox.onmousedown=function (e){
            e=e || window.event
            //获取鼠标位置和盒子边缘的差值
            let x=e.pageX-loginBox.offsetLeft
            let y=e.pageY-loginBox.offsetTop
            console.log(x,y);

            //监听盒子中鼠标移动事件
            loginBox.onmousemove=function (ev){
                //设置盒子left  top分别为鼠标位置减去边缘位置
                loginBox.style.left=ev.pageX-x+"px"
                loginBox.style.top=ev.pageY-y+"px"
            }

        }

        //鼠标按键抬起事件
        loginBox.onmouseup=function (e){
            e=e||window.event
            loginBox.onmousemove=null
            console.log("okok")
        }


    },false)



</script>
</html>