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

    文章目录

    • 一、预备知识
      • 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结构

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <link rel="stylesheet" href="../css/reset.css">
    9.     <link rel="stylesheet" href="../css/login-one.css">
    10.     <title>网易云音乐title>
    11. head>
    12.  
    13. <body>
    14.     
    15.     <div class="container">
    16.         
    17.         <div class="wrap">
    18.             
    19.             <div class="title">
    20.                 <span class="login-one">登录span>
    21.                 <span><a href="javascript:;" class="quite">×a>span>
    22.             div>
    23.             
    24.             <div class="user-login">
    25.                 <div class="user-login-inner">
    26.                     
    27.                     <div class="left-login">
    28.                         <img src="../img/登录页面图库/登录页面图标.png" alt="">
    29.                         <a href="#" class="byphone-login">手机号登录a>
    30.                         <a href="#" class="register">注册a>
    31.                     div>
    32.                     
    33.                     <ul class="right-login">
    34.                         <li><a href="#"><i>i>微信登录a>li>
    35.                         <li><a href="#"><i>i>QQ登录a>li>
    36.                         <li><a href="#"><i>i>微博登录a>li>
    37.                         <li><a href="#"><i>i>网易邮箱账号登录a>li>
    38.                     ul>
    39.                 div>
    40.  
    41.             div>
    42.             
    43.             <div class="user-agree">
    44.                 <input type="checkbox" name="user-agree">
    45.                 <span class="agree">同意span>
    46.                 <a href="#">《服务条款》a>
    47.                 <a href="#">《隐私政策》a>
    48.                 <a href="#">《儿童隐私政策》a>
    49.             div>
    50.             
    51.             <div class="code">
    52.                 <img src="../img/登录页面图库/二维码.png" alt="">
    53.             div>
    54.         div>
    55.     div>
    56.     <script src="../INDEXJS/login-one.js">script>
    57. body>
    58.  
    59. html>

    3.2 CSS样式

    1. /* 外部容器样式设置 */
    2. .wrap {
    3.     margin: 200px auto;
    4.     width: 530px;
    5.     height: 366px;
    6.     background-color: #ffffff;
    7.     position: relative;
    8. }
    9.  
    10. /* 顶部标题样式设置 */
    11. .title {
    12.     height: 39px;
    13.     line-height: 39px;
    14.     background-color: #2d2d2d;
    15.     padding: 0px 25px 0px 18px;
    16.     border-bottom: 1px solid #191919;
    17.     border-radius: 4px 4px 0 0;
    18. }
    19.  
    20. .login-one {
    21.     font-weight: bold;
    22.     font-size: 14px;
    23.     color: #fff;
    24. }
    25.  
    26. .quite {
    27.     margin-left: 20px;
    28.     float: right;
    29.     color: #888888;
    30.     font-size: 23px;
    31. }
    32.  
    33. /*  用户登录区域样式设置*/
    34. .user-login {
    35.     width: 528px;
    36.     height: 326px;
    37.     border: 1px solid #d8d8d8;
    38.     border-top: none;
    39.     border-radius: 0 0 4px 4px;
    40.     overflow: hidden;
    41. }
    42.  
    43. .user-login-inner {
    44.     width: 488px;
    45.     height: 266.26px;
    46.     margin: 30px 20px;
    47.     position: relative;
    48. }
    49.  
    50. /* 左侧登录区域 */
    51. .left-login {
    52.     width: 225px;
    53.     height: 205.3px;
    54.     padding: 0px 35px 3px 40px;
    55.     border-right: 1px dotted #ccc;
    56. }
    57.  
    58. .left-login img {
    59.     width: 224px;
    60.     height: 120px;
    61. }
    62.  
    63. .left-login a {
    64.     display: inline-block;
    65.     width: 224px;
    66.     height: 31px;
    67.     line-height: 31px;
    68.     text-align: center;
    69.     border-radius: 5px;
    70.     font-size: 12px;
    71.     margin-top: 10px;
    72. }
    73.  
    74. .byphone-login {
    75.     background-color: #2d7dca;
    76.     border: 1px solid #cdcccc;
    77.     color: #fff;
    78. }
    79.  
    80. .byphone-login:hover {
    81.     background-color: #4a94d9;
    82. }
    83.  
    84. .register {
    85.     background-color: #f3f3f3;
    86.     border: 1px solid #cbcbcb;
    87.     color: #333333;
    88. }
    89.  
    90. .register:hover {
    91.     background-color: #ffffff;
    92. }
    93.  
    94. /* 右侧用户多选登录方案区域样式设置 */
    95. .right-login {
    96.     position: absolute;
    97.     top: 0;
    98.     right: 0;
    99.     width: 148px;
    100.     height: 214.21px;
    101.     margin-top: -15px;
    102.     padding: 3px 0 3px 39px;
    103. }
    104.  
    105. .right-login a {
    106.     display: inline-block;
    107.     width: 148px;
    108.     height: 38.55px;
    109.     line-height: 38.55px;
    110.     margin-top: 15px;
    111.     font-size: 12px;
    112.     color: #333333;
    113. }
    114.  
    115. .right-login li a:hover {
    116.     text-decoration: underline;
    117. }
    118.  
    119. .right-login i {
    120.     display: inline-block;
    121.     vertical-align: middle;
    122.     margin-right: 14px;
    123.     width: 38px;
    124.     height: 38px;
    125. }
    126.  
    127. .right-login li:first-child i {
    128.     background-image: url(../img/登录页面图库/通讯软件logo.png);
    129.     background-position: -150px -670px;
    130. }
    131.  
    132. .right-login li:nth-child(2) i {
    133.     background-image: url(../img/登录页面图库/通讯软件logo.png);
    134.     background-position: -190px -670px;
    135. }
    136.  
    137. .right-login li:nth-child(3) i {
    138.     background-image: url(../img/登录页面图库/通讯软件logo.png);
    139.     background-position: -231px -670px;
    140. }
    141.  
    142. .right-login li:nth-child(4) i {
    143.     background-image: url(../img/登录页面图库/通讯软件logo.png);
    144.     background-position: -271px -670px;
    145. }
    146.  
    147. /* 底部同意服务条款区域样式设置 */
    148. .user-agree {
    149.     position: relative;
    150.     top: -50px;
    151.     margin-left: 33px;
    152. }
    153.  
    154. .agree {
    155.     font-family: NotoSansHans-Regular;
    156.     font-size: 10px;
    157.     color: rgba(0, 0, 0, 0.4);
    158.     line-height: 15px;
    159.     margin-left: -4px;
    160.     margin-right: -5px;
    161. }
    162.  
    163. .user-agree a {
    164.     color: #507DAF;
    165.     cursor: pointer;
    166.     font-size: 12px;
    167.     margin-right: -4px;
    168. }
    169.  
    170. input[type=checkbox] {
    171.     vertical-align: middle;
    172.     border-color: #767676;
    173. }
    174.  
    175. input[type=checkbox] {
    176.     border-color: #4f4f4f;
    177. }
    178.  
    179. /* 底部右侧二维码样式设置 */
    180. .code img {
    181.     width: 52px;
    182.     height: 52px;
    183.     position: absolute;
    184.     right: 0;
    185.     bottom: 0;
    186. }

    3.3 JS 行为

    1. // 实现当鼠标点击标题栏时登录框随着鼠标的移动而移动效果
    2.  
    3. /*
    4. 思路 —— 
    5. 1.获取鼠标位于当前标题栏的位置
    6. 2.mousemove 鼠标移动的时获取最新的pageX减去
    7. 鼠标在登录框的X距离，就是模态框的left与top值。
    8.  */
    9.  
    10. // 获取外部容器
    11. var wrap = document.querySelector(".wrap");
    12. // 获取标题栏
    13. var title = document.querySelector(".title");
    14.  
    15. // 为标题栏添加鼠标点击事件
    16. title.addEventListener("click", function (e) {
    17.   var x = e.pageX - wrap.offsetLeft;
    18.   var y = e.pageY - wrap.offsetTop;
    19.   // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
    20.   document.addEventListener("mousemove", move);
    21.   function move(e) {
    22.     wrap.style.left = e.pageX - x - 580 + "px";
    23.     wrap.style.top = e.pageY - y - 200 + "px";
    24.   }
    25.   // (3) 鼠标弹起，就让鼠标移动事件移除
    26.   document.addEventListener("dblclick", function () {
    27.     document.removeEventListener("mousemove", move);
    28.   });
    29. });

    总结

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

  • 相关阅读:
    不同的方式检查Null
    【JavaSE】初识泛型
    配置vscode免密登录本地Ubuntu
    论文复现（一）
    【云原生】Kubernetes PDB（Pod Disruption Budget）介绍与简单使用
    SINetv2：Concealed Object Detection——论文简述
    模型部署 — PaddleNLP 基于 Paddle Serving 快速使用（服务化部署 - Docker）— 图像识别 + 信息抽取(UIE-X)
    Docker部署Logstash 7.2.0
    深圳库卡机器人KR460控制柜维修快速解决
    社交网络用户行为分析,各类社交软件用户分析
  • 原文地址：https://blog.csdn.net/Bonsoir777/article/details/126592058