5-3 实战题
本节编程练习不计算学习进度，请电脑登录imooc.com操作

实战题

学习完《三个关键鼠标拖拽事件》内容后，来检验一下吧！在右侧的编辑器中补全相应的代码！有三个任务需要完成。

任务

任务1：请在右侧编辑器的第165行补充完整为 #dialogTitle 元素设置事件监听的API

任务2：请在右侧编辑器的第182行补充完整脚本中，鼠标移动时，计算浮层新位置 moveX 的代码

任务3：请在右侧编辑器的第190行补充完整脚本中，鼠标松开后的处理代码

温馨提示：完成的任务要与要求的代码效果相一致才可以通过本次测试，否则就再看一遍视频哦！
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  
  6. <title>慕课网-拖拽效果</title>
  7.  
  8. <style type="text/css">
  9.  
  10.     body{background: url(images/baidu_demo.png) #fff top center no-repeat;
  11.         padding: 0px;margin: 0px;font-size: 12px;font-family: "微软雅黑";
  12.     }
  13.  
  14.     /*登录浮层组件*/
  15.     .ui-dialog{ 
  16.         width: 380px;height: auto;
  17.         position: absolute;z-index: 9000;
  18.         top: 100px;left: 100px;
  19.         border: 1px solid #D5D5D5;background: #fff;
  20.     }
  21.  
  22.     .ui-dialog a{text-decoration: none;}
  23.  
  24.     /*标题栏区域*/
  25.     .ui-dialog-title{
  26.         height: 48px;line-height: 48px; padding:0px 20px;color: #535353;font-size: 16px;
  27.         border-bottom: 1px solid #efefef;background: #f5f5f5;
  28.         cursor: move;
  29.         user-select:none;
  30.     }
  31.  
  32.     /*关闭按钮设置*/
  33.     .ui-dialog-closebutton{
  34.         width: 16px;height: 16px;display: block;
  35.         position: absolute;top: 12px;right: 20px;
  36.         background: url(images/close_def.png) no-repeat;cursor: pointer;
  37.  
  38.     }
  39.     .ui-dialog-closebutton:hover{background:url(images/close_hov.png);}
  40.  
  41.     /*内容区域*/
  42.     .ui-dialog-content{
  43.         padding: 15px 20px;
  44.     }
  45.  
  46.     /*每行元素可能需要的样式*/
  47.     .ui-dialog-pt15{
  48.         padding-top: 15px;
  49.     }
  50.     .ui-dialog-l40{
  51.         height: 40px;line-height: 40px;
  52.         text-align: right;
  53.     }
  54.  
  55.     /*输入框公用的样式*/
  56.     .ui-dialog-input{
  57.         width: 100%;height: 40px;
  58.         margin: 0px;padding:0px;
  59.         border: 1px solid #d5d5d5;
  60.         font-size: 16px;color: #c1c1c1;
  61.         text-indent: 25px;
  62.         outline: none;
  63.     }
  64.  
  65.     /*两个输入框的icon设置*/
  66.     .ui-dialog-input-username{
  67.         background: url(images/input_username.png) no-repeat 2px ;
  68.     }
  69.     .ui-dialog-input-password{
  70.         background: url(images/input_password.png) no-repeat 2px ;
  71.     }
  72.  
  73.     /*提交按钮的样式*/
  74.     .ui-dialog-submit{
  75.         width: 100%;height: 50px;background: #3b7ae3;border:none;font-size: 16px;color: #fff;
  76.         outline: none;text-decoration: none;
  77.         display: block;text-align: center;line-height: 50px;
  78.     }
  79.     .ui-dialog-submit:hover{
  80.         background: #3f81b0;
  81.     }
  82.  
  83.  
  84.     .ui-mask{ 
  85.         width: 100%;height:100%;background: #000;
  86.         position: absolute;top: 0px;height: 0px;z-index: 8000;
  87.         opacity:0.4; filter: Alpha(opacity=40);
  88.     }
  89.  
  90.     .link{
  91.         text-align: right;line-height: 20px;padding-right: 40px;
  92.     }
  93.  
  94. </style>
  95. </head>
  96. <body >
  97.  
  98.  
  99.  
  100. <div class="ui-dialog" id="dialog">
  101.  
  102. <div class="ui-dialog-title" id="dialogTitle">
  103.             登录通行证
  104. <a href="javascript:hideDialog();" class="ui-dialog-title-closebutton"></a>
  105. </div>
  106. <div class="ui-dialog-content">
  107.  
  108.  
  109. <div class="ui-dialog-pt15 ui-dialog-l40">
  110. <input type="text" value="手机/邮箱/用户名" class="ui-dialog-input ui-dialog-input-username">
  111. </div>
  112. <div class="ui-dialog-pt15 ui-dialog-l40">
  113. <input type="text" value="密码" class="ui-dialog-input ui-dialog-input-password">
  114. </div>
  115. <div class=" ui-dialog-l40 ">
  116. <a href="#">忘记密码</a>
  117. </div>
  118. <div>
  119.  
  120. <a href="#" class="ui-dialog-submit">登录</a>
  121.  
  122. </div>
  123. <div class="ui-dialog-l40">
  124. <a href="#">立即注册</a>
  125. </div>
  126. </div>
  127. </div>
  128.  
  129. <div class="link">
  130. <a href="javascript:showDialog();">登录</a>
  131. </div>
  132. <div class="ui-mask" id="mask" onselectstart="return false"></div>
  133.  
  134. <script type="text/javascript">
  135.  
  136.     //  获取元素对象  
  137.     function g(id){return document.getElementById(id);}
  138.  
  139.     //  自动居中元素（el = Element）
  140.     function autoCenter( el ){
  141.         var bodyW = document.documentElement.clientWidth;
  142.         var bodyH = document.documentElement.clientHeight;
  143.  
  144.         var elW = el.offsetWidth;
  145.         var elH = el.offsetHeight;
  146.  
  147.         el.style.left = (bodyW-elW)/2 + 'px';
  148.         el.style.top = (bodyH-elH)/2 + 'px';
  149.  
  150.     }
  151.  
  152.     //  自动扩展元素到全部显示区域
  153.     function fillToBody( el ){
  154.         el.style.width  = document.documentElement.clientWidth  +'px';
  155.         el.style.height = document.documentElement.clientHeight + 'px';
  156.     }
  157.  
  158.  
  159.     var mouseOffsetX = 0;   //  偏移
  160.     var mouseOffsetY = 0;
  161.  
  162.     var isDraging = false;  //  是否可拖拽的标记
  163.  
  164.     //  鼠标事件1 － 在标题栏上按下（要计算鼠标相对拖拽元素的左上角的坐标，并且标记元素为可拖动）
  165.     g('dialogTitle').【任务1】('mousedown',function(e){
  166.         var e = e || window.event;
  167.         mouseOffsetX = e.pageX - g('dialog').offsetLeft;
  168.         mouseOffsetY = e.pageY - g('dialog').offsetTop;
  169.         isDraging = true;
  170.     })
  171.  //  鼠标事件2 － 鼠标移动时（要检测，元素是否可标记为移动，如果是，则更新元素的位置，到当前鼠标的位置［ps：要减去第一步中获得的偏移］）
  172.     document.onmousemove = function( e ){
  173.         var e = e || window.event;
  174.  
  175.         var mouseX = e.pageX;   // 鼠标当前的位置
  176.         var mouseY = e.pageY;
  177.  
  178.         var moveX = 0;  //  浮层元素的新位置
  179.         var moveY = 0;
  180.  
  181.         if( isDraging === true ){
  182.             moveX = 【任务2】
  183.             moveY = mouseY - mouseOffsetY;
  184.             g('dialog').style.left = moveX + 'px';
  185.             g('dialog').style.top  = moveY + 'px';
  186.         }
  187.     }
  188.     //  鼠标事件3 － 鼠标松开的时候（标记元素为不可拖动即可）
  189.     document.onmouseup = function(){
  190.    【任务3】
  191.     }
  192. </script>
  193. </body>
  194. </html>
下一节