Native JS to implement pop-up layer login drag function _javascript skills

In the Web development process, there will always be some never contact with the needs, always want to do everything possible to study, the ultimate realization of the effect of the moment to achieve a sense of accomplishment, there is wood?

Message wall, pop-up box and some common places have drag and drop function, user-friendly experience well.

Implement drag-and-drop functionality, three event MouseMove, MouseUp, MouseDown, offset (offsetleft, offsettop, Offsetwidth, offsetheight), window coordinate position (ClientX, Clien TY) and to obtain the compatibility processing of the visual area method.

Before doing more of the wall effect of the message was written, this time to do the notes, now to tidy up.

JavaScript code:

Window.onload = function () {var btn = document.getelementsbyclassname (' login ') [0] var close = document.getElementById (
 ' Close ');
 var login = document.getElementById (' login '); var top = (document.documentelement.clientheight-250)/2;
 The top value equals (Gets the width of the page's viewable area-the height of the login box)/2 var left = (document.documentelement.clientwidth-350)/2;
 var open = document.getElementById (' screen ');
  Btn.onclick = function () {login.style.display = ' block ';
  Login.style.left = left + ' px ';
  Login.style.top = top + ' px ';
  Open.style.display = ' block '; Open.style.width = Getinner (). Width + ' px ';
 The width of the pop-up layer equals the width of the visual window Open.style.height = Getinner (). Height + ' px ';
  } Close.onclick = function () {Login.style.display = ' none ';
 Open.style.display = ' None ';
   } window.onresize = function () {var top = (Getinner (). height-250)/2;
   var left = (Getinner (). width-350)/2;
   Login.style.left = left + ' px ';
  Login.style.top = top + ' px '; //cross-Browser Get visual window function Getinner () {if (window.inNerwidth!= ' undefined ') {//ie does not support returning Undefind return {width:window.innerWidth, height:window.innerHeight } else {return {width:document.documentElement.clientWidth, Height:document.documentElement.clientHeigh T}}///implementation drag and drop function, three events MouseMove, MouseUp, MouseDown//clientx, ClientY when the mouse pointer relative to the entire screen coordinates distance//offsetleft, Offsetto 
   P Gets the position of the current element relative to the parent element, where the parent element is document Login.onmousedown = function (e) {stop (E);//block event default behavior var e = e | | window.event; var oleft = E.clientx-login.offsetleft;
   Login.offsetleft Gets the box border to the left edge of the browser var otop = e.clienty-login.offsettop;
    Document.onmousemove = function (e) {//Mobile is the whole doucment var e = e | | window.event;
    Cannot move out of the visible region var left = E.clientx-oleft;
    var top = E.clienty-otop;
    Left < 0 {//If the box distance from the left is less than 0, that is, it is out of left-hand = 0; else if (Left > Getinner (). Width-login.offsetwidth) {//The length of the viewable area, minus the length of the box offsetwidth left = Getinner (). Width-
    Login.offsetwidth; }
    Upper and lower if (top < 0) {top = 0;
    else if (Top > Getinner (). height-login.offsetheight) {top = Getinner (). Height-login.offsetheight;
    } Login.style.left = left + ' px ';
   Login.style.top = top + ' px ';
    } document.onmouseup = function () {document.onmousemove = null;
   Document.onmouseup = null;
  }//Cancel default behavior function stop (e) {var e = e | | window.event; if (typeof e.preventdefault!= ' undefined ') {e.preventdefault ();//w3c} else {e.returnvalue = false;//ie Block event defaults
 Behavior}}}

HTML code:

<div id= "header" > <div class= "logo" ></div> <div class=" Member "> Personal Center <ul class=" List "> <li><a href=" ### "> Settings </a></li> <li><a href = "###" > Skin </a></li> <li><a href= "###" > Help </a></li> <li><a href= "###" > Exit </a></li> </ul> </div> <div class= "Login" > Login </div> </div> <div id= ' Login ' >  

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.