JS——利用js实现模态框的拖拽

于 2022-08-29 20:49:29 发布
阅读量563 收藏 2
点赞数 2
分类专栏： JavaScript css/css3 文章标签： 前端 javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bonsoir777/article/details/126592058
版权

文章目录

  • 一、预备知识
    • 1.offset 偏移量
    • 2.offset 与 style 区别
  • 二、实现过程
    • 1.示例图
    • 2.实现思路
    • 3.具体代码实现
  • 总结

一、预备知识

1.offset 偏移量

offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

  • - offset 可以得到任意样式表中的样式值
  • - offset 系列获得的数值是没有单位的
  • - offsetWidth 包含padding+border+width
  • - offsetWidth 等属性是只读属性，只能获取不能赋值
  • - offsetLeft  返回相对于父元素左边框的距离,动态的。
  • - offsetTop  返回相对于父元素上方的举例

2.offset 与 style 区别

  • - offsetWidth 数值是没有单位的
  • - offsetWidth 包含padding+border+width
  • - offsetWidth 只读属性，只能获取不能赋值
  • - style.width 获得的是带有单位的字符串，只获取行内样式。
  • - style.width 获得不包含padding和border 的值
  • - style.width 是可读写属性，可以获取也可以赋值

总结：获取元素位置用offset ,修改元素属性值用style

二、实现过程

1.示例图

 2.实现思路

模态款的拖拽在许多页面中都很常见，那么如何实现呢？在许多应用中常采取点击某模态框标题栏的方式，该区域即会随着鼠标的移动而移动。

  1. 本例以鼠标单击为例，获取在鼠标在该模态框标题栏的位置。
  2. 随即获取当 鼠标移动时（mousemove）该模态框最新的（页面左边的距离）(pageX)减去鼠标在标题栏的横向距离，就是模态框的left与top值。

  3. 鼠标松开时（mouseup），移除mousemove 事件

3.具体代码实现

3.1 HTML结构

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/login-one.css">
    <title>网易云音乐</title>
</head>

<body>
    <!-- 背景容器 -->
    <div class="container">
        <!-- 外部容器 -->
        <div class="wrap">
            <!-- 顶部标题 -->
            <div class="title">
                <span class="login-one">登录</span>
                <span><a href="javascript:;" class="quite">×</a></span>
            </div>
            <!--用户登录区域  -->
            <div class="user-login">
                <div class="user-login-inner">
                    <!-- 左侧登录区域 -->
                    <div class="left-login">
                        <img src="../img/登录页面图库/登录页面图标.png" alt="">
                        <a href="#" class="byphone-login">手机号登录</a>
                        <a href="#" class="register">注册</a>
                    </div>
                    <!-- 右侧用户多选登录方案区域 -->
                    <ul class="right-login">
                        <li><a href="#"><i></i>微信登录</a></li>
                        <li><a href="#"><i></i>QQ登录</a></li>
                        <li><a href="#"><i></i>微博登录</a></li>
                        <li><a href="#"><i></i>网易邮箱账号登录</a></li>
                    </ul>
                </div>

            </div>
            <!-- 底部同意服务条款区域 -->
            <div class="user-agree">
                <input type="checkbox" name="user-agree">
                <span class="agree">同意</span>
                <a href="#">《服务条款》</a>
                <a href="#">《隐私政策》</a>
                <a href="#">《儿童隐私政策》</a>
            </div>
            <!-- 底部右侧二维码 -->
            <div class="code">
                <img src="../img/登录页面图库/二维码.png" alt="">
            </div>
        </div>
    </div>
    <script src="../INDEXJS/login-one.js"></script>
</body>

</html>

3.2 CSS样式

/* 外部容器样式设置 */
.wrap {
    margin: 200px auto;
    width: 530px;
    height: 366px;
    background-color: #ffffff;
    position: relative;
}

/* 顶部标题样式设置 */
.title {
    height: 39px;
    line-height: 39px;
    background-color: #2d2d2d;
    padding: 0px 25px 0px 18px;
    border-bottom: 1px solid #191919;
    border-radius: 4px 4px 0 0;
}

.login-one {
    font-weight: bold;
    font-size: 14px;
    color: #fff;
}

.quite {
    margin-left: 20px;
    float: right;
    color: #888888;
    font-size: 23px;
}

/*  用户登录区域样式设置*/
.user-login {
    width: 528px;
    height: 326px;
    border: 1px solid #d8d8d8;
    border-top: none;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
}

.user-login-inner {
    width: 488px;
    height: 266.26px;
    margin: 30px 20px;
    position: relative;
}

/* 左侧登录区域 */
.left-login {
    width: 225px;
    height: 205.3px;
    padding: 0px 35px 3px 40px;
    border-right: 1px dotted #ccc;
}

.left-login img {
    width: 224px;
    height: 120px;
}

.left-login a {
    display: inline-block;
    width: 224px;
    height: 31px;
    line-height: 31px;
    text-align: center;
    border-radius: 5px;
    font-size: 12px;
    margin-top: 10px;
}

.byphone-login {
    background-color: #2d7dca;
    border: 1px solid #cdcccc;
    color: #fff;
}

.byphone-login:hover {
    background-color: #4a94d9;
}

.register {
    background-color: #f3f3f3;
    border: 1px solid #cbcbcb;
    color: #333333;
}

.register:hover {
    background-color: #ffffff;
}

/* 右侧用户多选登录方案区域样式设置 */
.right-login {
    position: absolute;
    top: 0;
    right: 0;
    width: 148px;
    height: 214.21px;
    margin-top: -15px;
    padding: 3px 0 3px 39px;
}

.right-login a {
    display: inline-block;
    width: 148px;
    height: 38.55px;
    line-height: 38.55px;
    margin-top: 15px;
    font-size: 12px;
    color: #333333;
}

.right-login li a:hover {
    text-decoration: underline;
}

.right-login i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 14px;
    width: 38px;
    height: 38px;
}

.right-login li:first-child i {
    background-image: url(../img/登录页面图库/通讯软件logo.png);
    background-position: -150px -670px;
}

.right-login li:nth-child(2) i {
    background-image: url(../img/登录页面图库/通讯软件logo.png);
    background-position: -190px -670px;
}

.right-login li:nth-child(3) i {
    background-image: url(../img/登录页面图库/通讯软件logo.png);
    background-position: -231px -670px;
}

.right-login li:nth-child(4) i {
    background-image: url(../img/登录页面图库/通讯软件logo.png);
    background-position: -271px -670px;
}

/* 底部同意服务条款区域样式设置 */
.user-agree {
    position: relative;
    top: -50px;
    margin-left: 33px;
}

.agree {
    font-family: NotoSansHans-Regular;
    font-size: 10px;
    color: rgba(0, 0, 0, 0.4);
    line-height: 15px;
    margin-left: -4px;
    margin-right: -5px;
}

.user-agree a {
    color: #507DAF;
    cursor: pointer;
    font-size: 12px;
    margin-right: -4px;
}

input[type=checkbox] {
    vertical-align: middle;
    border-color: #767676;
}

input[type=checkbox] {
    border-color: #4f4f4f;
}

/* 底部右侧二维码样式设置 */
.code img {
    width: 52px;
    height: 52px;
    position: absolute;
    right: 0;
    bottom: 0;
}

3.3 JS 行为

// 实现当鼠标点击标题栏时登录框随着鼠标的移动而移动效果

/*
思路 —— 
1.获取鼠标位于当前标题栏的位置
2.mousemove 鼠标移动的时获取最新的pageX减去
鼠标在登录框的X距离，就是模态框的left与top值。
 */

// 获取外部容器
var wrap = document.querySelector(".wrap");
// 获取标题栏
var title = document.querySelector(".title");

// 为标题栏添加鼠标点击事件
title.addEventListener("click", function (e) {
  var x = e.pageX - wrap.offsetLeft;
  var y = e.pageY - wrap.offsetTop;
  // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
  document.addEventListener("mousemove", move);
  function move(e) {
    wrap.style.left = e.pageX - x - 580 + "px";
    wrap.style.top = e.pageY - y - 200 + "px";
  }
  // (3) 鼠标弹起，就让鼠标移动事件移除
  document.addEventListener("dblclick", function () {
    document.removeEventListener("mousemove", move);
  });
});

总结

以上就是今日所要分享的内容，最后，依旧诚挚祝福屏幕前的你健康幸福、平安喜乐。

Bonsoir777
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值