拖拽登录框实现-优快云博客

本文链接：https://blog.youkuaiyun.com/qqABCDYOONA/article/details/78110919

<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道</title>
</head>

<style>
    .back_img {
        position: absolute;
        width: 100%;
        height: 100%;
        /*border: 1px solid black;*/
        background-color: black;
        opacity: 0.3;
        display: none;
    }

    .cont {
        position: absolute;
        width: 399px;
        height: 500px;
        border: 1px solid black;
    }

    .cont hr {
        position: absolute;
        color: black;
        width: 399px;
        margin-top: 50px;
    }

    .login_top {
        position: absolute;
        /*border: 1px solid black;*/
        width: 399px;
        height: 50px;
    }
    .login_top:hover{
        cursor: move;
    }

    .login_top img {
        position: absolute;
        height: 50px;
        margin-left: 10px;
    }

    .login_top font {
        position: absolute;
        margin-left: 56px;
        margin-top: 22px;
    }
    .min{
        position: absolute;
        width: 25px; height: 25px;
        border: 1px solid black;
        margin-left: 350px;
        margin-top: 10px;
    }
    .min strong{
        position: absolute;
        font-size: 35px;
        line-height: 25px;
        text-align: center;
    }
</style>

<script type="text/javascript" src="js/a.js"></script>

<script>
</script>

<body>

    <!--背景覆盖图层-->
    <div id="backimg" class="back_img"></div>


<!--    注册页面-->
    <div id="mouse" class="cont" onmousedown="down()" onmouseup="up()" onmousemove="move()">
        <hr />

        <!--登录弹出框顶部拖拽部分-->
            <div    class="login_top"    >
                <img src="img/2017-09-25_145157.jpg" />
                <font>登录百度账号</font>

                <!--最小化按钮-->
                <div class="min">
                    <strong>×</strong>
                </div>
                <!--关闭按钮-->
                <div class="close"></div>

            </div>
    </div>

这里写图片描述

以下为JS文件，请注意

var div_x, div_y; //获取div的坐标
var move_x, move_y; //获取鼠标按下时的时事坐标
var new_div_x, new_div_y, new_move_x, new_move_y; //获取鼠标移动后div与鼠标按下时的坐标
var move_div_x, move_div_y; //鼠标按下时，鼠标与div的偏移量

var isDown = false; //记录鼠标的事实状态
var move_div; //要操作的div对象

// 鼠标按下事件
function down() {
// 判断鼠标是否按下
move_div = document.getElementById(“mouse”);
isDown = true;

//获取div的坐标
div_x = move_div.offsetLeft;
div_y = move_div.offsetTop;

//获取鼠标按下时的时事坐标
move_x = event.clientX;
move_y = event.clientY;

//获取鼠标与div的偏移量
move_div_x = move_x - div_x;
move_div_y = move_y - div_y;

}

// 鼠标松开事件
function up() {
isDown = false;
}

// 鼠标移动事件
function move() {
move_div = document.getElementById(“mouse”);

//时事更新div的坐标
div_x = move_div.offsetLeft;
div_y = move_div.offsetTop;

//获取鼠标移动后的事实坐标
new_move_x = event.clientX;
new_move_y = event.clientY;

if(isDown) {

    //获取新的div的坐标：鼠标时事坐标-鼠标与div的偏移量
    new_div_x = new_move_x - move_div_x;
    new_div_y = new_move_y - move_div_y;

    //将新的div的坐标赋值给di对象
    move_div.style.left = new_div_x + "px";
    move_div.style.top = new_div_y + "px";
}

}

页面拖拽效果