拖动的模拟效果

最新推荐文章于 2024-09-03 17:02:58 发布

立志成为有钱人

最新推荐文章于 2024-09-03 17:02:58 发布

阅读量325

点赞数 8

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2301_79605560/article/details/140782794

版权

这里我要强调一个坑！！！特大坑！！！你要拖动一个盒子，他的css里面是不可以有margin的，我起初是让盒子居中（更好看），后来js怎么写都没办法拖动。怎么检查都没想到问题在css上面！！！换个思路想，margin把盒子的位置定了，还咋移动呀（当时要是有这个觉悟就好了）。

那么，要是想改动盒子的位置怎么办呢？？直接style呀,<div style="left:550px;></div>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one,
        .header,
        .content {
            text-align: center;
        }

        .header,
        .content-1,
        .one {
            height: 30px;
        }

        .login {
            background-color: darkseagreen;
            width: 300px;
            height: 100px;
            position: absolute;
            display: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        .close {
            float: right;
        }
    </style>
</head>

<body>
    <div class="one"><a class="link" href="">点击，弹出登录框</a></div>
    <div class="login" style="left:500px">
        <div class="header">登录会员
            <span class="close"><a href="">关闭</a></span>
        </div>
        <div class="content">
            <div class="content-1">用户名: <input class="input" type="text" value="请输入用户名"></div>
            <div class="content-2">密码：<input class="password" type="text" value="请输入密码"></div>
        </div>
    </div>

    <script>
        var button1 = document.querySelector('.link');
        var login = document.querySelector('.login');
        var close = document.querySelector('.close');
        var input1 = document.querySelector('.input');
        var input2 = document.querySelector('.password');

        button1.addEventListener('click', function () {
            login.style.display = 'block';
            event.preventDefault();
        })
        close.addEventListener('click', function () {
            login.style.display = 'none';
        })
        input1.addEventListener('focus', function () {
            if (this.value == '请输入用户名') {
                this.value = '';
            }
        })
        input1.addEventListener('blur', function () {
            if (this.value == '') {
                this.value = '请输入用户名';
            }
        })
        input2.addEventListener('focus', function () {
            if (this.value == '请输入密码') {
                this.value = '';
            }
        })
        input2.addEventListener('blur', function () {
            if (this.value == '') {
                this.value = '请输入密码';
            }
        })
        var header = document.querySelector('.header');
        header.addEventListener('mousedown', function (e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            document.addEventListener('mousemove', move);
            function move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', move);
            })

        })

    </script>
</body>

</html>

这个案列不仅练习了拖动，还顺便练习了文本框的获得焦点和失去焦点。还有一个，当点击出现登录框的时候，会瞬间闪现， event.preventDefault();阻止自动刷新。

立志成为有钱人

关注

8
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖动的模拟效果

这里我要强调一个坑！你要拖动一个盒子，他的css里面是不可以有margin的，我起初是让盒子居中（更好看），后来js怎么写都没办法拖动。怎么检查都没想到问题在css上面！换个思路想，margin把盒子的位置定了，还咋移动呀（当时要是有这个觉悟就好了）。这个案列不仅练习了拖动，还顺便练习了文本框的获得焦点和失去焦点。还有一个，当点击出现登录框的时候，会瞬间闪现， event.preventDefault();那么，要是想改动盒子的位置怎么办呢？
复制链接

扫一扫