JavaScript realizes Apple suspension virtual button _javascript technique

JavaScript implementation Apple Suspension virtual button

Introduce code directly to the page
Where the code is partially redundant, interested small partners can also modify their own
If there's a bug, remember to tell me.

Web-touch.js

var new_element_n=document.createelement ("style");    new_element_n.innerhtml = ' #drager {' + ' position:fixed; ' + ' width:35px; ' + ' height:35px; ' + '
    Background-color:rgba (0, 0, 0, 0.2); ' + ' z-index:10000; ' + ' cursor:pointer; ' + ' top:0px; ' + 
    ' left:0px ' + ' border-radius:30%; ' + ' padding:6px; ' + '} ' + ' + ' #drager >div {' + ' border-radius:50% ' + ' width:100%; ' + ' height:100% ' + ' Background-color:rgba (0, 0, 0, 0
    .3); ' + ' transition:all 0.2s; ' + '-webkit-transition:all 0.2s; ' + '-moz-transition:all 0.2s; ' +
    '-o-transition:all 0.2s; ' + '} ' + ' #drager: hover>div{' + ' Background-color:rgba (0, 0, 0, 0.6); ' +
  ' } ';
  Document.body.appendChild (New_element_n); 
  New_element_n=document.createelement (' div ');
  New_element_n.setattribute ("id", "Drager");
  new_element_n.style.top= "100px"; New_element_n.style.left= "100px ";
  new_element_n.innerhtml = ' <div></div> ';
  Document.body.appendChild (New_element_n);
    var posx;   
    var posy;
    var screenwidth =document.documentelement.clientwidth;  
    var screenheight = document.documentElement.clientHeight; 
    var fdiv = document.getElementById ("Drager");
      Fdiv.onmousedown=function (e) {screenwidth =document.documentelement.clientwidth;  
      ScreenHeight = Document.documentElement.clientHeight;
      if (!e) {e = window.event;}//ie posx = E.clientx-parseint (fdiv.style.left);
      Posy = E.clienty-parseint (fdiv.style.top);      
    Document.onmousemove = MouseMove;
      Document.onmouseup = function ()//released automatically paste to the nearest position {document.onmousemove = null; if ((parseint (fdiv.style.top) +parseint (fdiv.clientheight)/2) <= (SCREENHEIGHT/2)) {//in the upper part if ((parseint ( Fdiv.style.left) +parseint (fdiv.clientwidth)/2) <= (SCREENWIDTH/2)) {//in left half if ((parseint (fdiv.style.top) +pArseint (Fdiv.clientheight)/2) <= (parseint (fdiv.style.left) +parseint (fdiv.clientwidth)/2)) {//near the top Fdiv.style.
          top= "0px";
          }else{//near left fdiv.style.left= "0px"; }else{//in the right half if (parseint (fdiv.style.top) +parseint (fdiv.clientheight)/2) <= (screenwidth-(parseint (f
          Div.style.left) +parseint (fdiv.clientwidth)/2)) {//close to the top fdiv.style.top= "0px";
          }else{//close to the right fdiv.style.left= (Screenwidth-parseint (fdiv.clientwidth)) + "px"; }}else{//Lower half if ((parseint (Fdiv.style.left) +parseint (fdiv.clientwidth)/2) <= (SCREENWIDTH/2)) {//In the left half if ((Screenheight-(parseint (fdiv.style.top) +parseint (fdiv.clientheight)/2)) <= (parseint (fdiv.style.le
          FT) +parseint (fdiv.clientwidth)/2) {//close to fdiv.style.top= (Screenheight-parseint (fdiv.clientheight)) + "px";
          }else{//near left fdiv.style.left= "0px"; }else{//in the right half of the IF (Screenheight-(parseint (fdiv.style.top) +parseint (fdiv.clientheight)/2) <= (screenwidth-(parseint) +
          parseint (Fdiv.clientwidth)/2)) {//close to the top fdiv.style.top= (Screenheight-parseint (fdiv.clientheight)) + "px";
          }else{//close to the right fdiv.style.left= (Screenwidth-parseint (fdiv.clientwidth)) + "px"; }}} function MouseMove (EV) {if (ev==null) {ev = window.event;}
      IE if ((ev.clienty-posy) <=0) {//over top fdiv.style.top= "0px"; }else if ((Ev.clienty-posy) > (Screenheight-parseint (fdiv.clientheight)) {//Over bottom fdiv.style.top= (screenheight-p
      Arseint (fdiv.clientheight)) + "px";
      }else{fdiv.style.top = (ev.clienty-posy) + "px";
      } if ((EV.CLIENTX-POSX) <=0) {//More than left fdiv.style.left= "0px"; }else if ((EV.CLIENTX-POSX) > (Screenwidth-parseint (fdiv.clientwidth)) {//More than right fdiv.style.left= (screenwidth-par
      Seint (fdiv.clientwidth)) + "px";
 }else{       Fdiv.style.left = (EV.CLIENTX-POSX) + "px";
       
    }//Console.log (Posx + "" + fdiv.style.left);
      } window.onload = Window.onresize = function () {//Window size Change event screenwidth =document.documentelement.clientwidth;  
      ScreenHeight = Document.documentElement.clientHeight; if ((parseint (fdiv.style.top) +parseint (fdiv.clientheight)) >screenheight) {//window changes to fit beyond fdiv.style.top= (screen
      Height-parseint (fdiv.clientheight)) + "px"; } if ((parseint (Fdiv.style.left) +parseint (fdiv.clientwidth) >screenwidth) {//window changes to fit out of the section Fdiv.style.lef
      T= (Screenwidth-parseint (fdiv.clientwidth)) + "px";
    } document.onmouseup.apply ()};  
    Fdiv.addeventlistener (' Touchstart ', Fdiv.onmousedown, false); Fdiv.addeventlistener (' Touchmove ', function (event) {//If there is only one finger in the position of the element if (event.targettouches . length = = 1) {event.preventdefault ();//block browser default event, important var touch = event.Targettouches[0];
              if ((touch.pagey) <=0) {//over top fdiv.style.top= "0px"; }else if (touch.pagey> (Screenheight-parseint (fdiv.clientheight)) {//Over bottom fdiv.style.top= (screenheight-pa
              Rseint (fdiv.clientheight)) + "px";
              }else{fdiv.style.top = (Touch.pagey-parseint (fdiv.clientheight)/2) + "px";
              } if (touch.pagex<=0) {//over left fdiv.style.left= "0px"; }else if (Touch.pagex > (Screenwidth-parseint (fdiv.clientwidth)) {//More than right fdiv.style.left= (SCREENWIDTH-PA
              Rseint (fdiv.clientwidth)) + "px";
              }else{Fdiv.style.left = (Touch.pagex-parseint (fdiv.clientwidth)/2) + "px"; 
    }}, False);       
    Fdiv.addeventlistener (' Touchend ', Document.onmouseup, false);
    Fdiv.ondblclick=function () {//Double click events may be in the mobile phone browser will zoom event conflict alert ("Play Your Imagination Bar"); }

Html

<!doctype html>
 
 

Demo diagram