javascript实现可拖拽的盒子


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            height: 30px;
            background: #036663;
            border-bottom: 1px solid #369;
            line-height: 30px;
            padding-left: 30px;
        }

        .nav a {
            color: #fff;
            text-align: center;
            font-size: 14px;
            text-decoration: none;

        }

        .d-box {
            width: 400px;
            height: 300px;
            border: 5px solid #eee;
            box-shadow: 2px 2px 2px 2px #666;
            position: absolute;
            top: 40%;
            left: 40%;
        }

        .hd {
            width: 100%;
            height: 25px;
            background-color: #7c9299;
            border-bottom: 1px solid #369;
            line-height: 25px;
            color: white;
            cursor: move;
        }

        #box_close {
            float: right;
            cursor: pointer;
        }
    style>
    <script src="animate.js">script>
    <script>
        window.onload = function () {
            //需求:在指定位置按住鼠标左键移动对话框。
            //分析:鼠标按下,触动事件,移动在更换对话框的位置。
            //鼠标按下onmousedown   鼠标弹起:onmouseup   鼠标移动onmousemove
            //步骤:
            //1.老三步和新五步
            //2.把鼠标的坐标赋值给对话框。
            var box = document.getElementById("d_box");
            var drop = document.getElementById("drop");
            //1.老三步和新五步
            //先按下,在移动触动此事件
            drop.onmousedown = function (event) {
                //获取鼠标在盒子中的坐标,将来移动的时候减去保证鼠标在盒子的指定位置
                event = event || window.event;
                var pagex = event.pageX || scroll().left + event.clientX;
                var pagey = event.pageY || scroll().top + event.clientY;
                var x = pagex - box.offsetLeft;
                var y = pagey - box.offsetTop;
                document.onmousemove = function (event) {
                    //2.把鼠标的坐标赋值给对话框。
                    event = event || window.event;
                    var xx = event.pageX || scroll().left + event.clientX;
                    var yy = event.pageY || scroll().top + event.clientY;
                    //二次操作鼠标位置  减去鼠标在盒子中的坐标
                    xx = xx - x;
                    yy = yy - y;
                    //给box赋值
                    box.style.left = xx+"px";
                    box.style.top = yy+"px";
                    //禁止文本选中(选中后取消)
                    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                }
            }
            //事件解绑
            drop.onmouseup = function () {
                //解绑
                document.onmousemove = null;
            }
        }
    script>

head>
<body>

<div class="nav">
    <a href="javascript:;" id="register">注册信息a>
div>

<div class="d-box" id="d_box">
    <div class="hd" id="drop">
        <i>注册信息 (可以拖拽)i>
        <span id="box_close">【关闭】span>
    div>
    <div class="bd">div>
div>

body>
html>

javascript实现可拖拽的盒子_第1张图片

你可能感兴趣的:(javascript实现可拖拽的盒子)