以梦为马，不负韶华。

导航

拖动模态框（2） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拖拽效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    #div1{
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: pink;
        left: 50px;
        top: 100px;
    }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
<script>
    var div1=document.querySelector("#div1")
    // var 
        
    div1.onmousedown=function(e){
        var eto=e.pageY-div1.offsetTop     //鼠标距离盒子上面距离
        var ele=e.pageX-div1.offsetLeft   //鼠标距离盒子左侧位置
        document.onmousemove=function(e){
            div1.style.left=e.pageX-ele+'px'
            div1.style.top=e.pageY-eto+'px'
        } }
        div1.onmouseup=function(){
        document.onmousemove=null
    }
   
    
</script>
</html>

posted on 2020-01-10 16:51  小冉哥、  阅读(100)  评论(0)    收藏  举报