Javascript implements Apple floating virtual buttons
Just introduce the code to the page
There are some redundant codes, and those who are interested can modify them yourself.
If there is any bug, please remember to comment and 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;' + ' -moz-transition: all 0.2s;' + ' -o-transition: all 0.2s;' + ' }' + ' #drager:hover>div{' + ' background-color: rgba(0, 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()//Autoally paste to the nearest position when released { 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 the left part if((parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2)<=(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)){//Near the upper part fdiv.style.top="0px"; }else{//Near the left fdiv.style.left="0px"; } }else{//In the right half if((parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2)<=(screenWidth-(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)) ){//Near the top fdiv.style.top="0px"; }else{//Near the right fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px"; } } }else{ //The lower half of the if((parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)<=(screenWidth/2)){//In the left half of the if( (screenHeight-(parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2))<=(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)){//Near the lower part of the fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px"; }else{//Near the left fdiv.style.left="0px"; } }else{//In the right half if( (screenHeight-(parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2))<=(screenWidth-(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)) ){//Near the top fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px"; }else{//Near 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){//More than the top fdiv.style.top="0px"; }else if((ev.clientY - posY) >(screenHeight-parseInt(fdiv.clientHeight))){//Over the bottom fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px"; }else{ fdiv.style.top = (ev.clientY - posY) + "px"; } if((ev.clientX- posX)<=0){//Over the left fdiv.style.left="0px"; }else if((ev.clientX - posX) >(screenWidth-parseInt(fdiv.clientWidth))){//Over the right fdiv.style.left=(screenWidth-parseInt(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){//The window changes the part beyond the adaptation fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px"; } if( (parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth))>screenWidth){//The window changes the part beyond the adaptation fdiv.style.left=(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 this element if (event.targetTouches.length == 1) { event.preventDefault();// Block the browser default event, important var touch = event.targetTouches[0]; if((touch.pageY)<=0){//Over the top fdiv.style.top="0px"; }else if(touch.pageY>(screenHeight-parseInt(fdiv.clientHeight))){//Over the bottom fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px"; }else{ fdiv.style.top = (touch.pageY-parseInt(fdiv.clientHeight)/2) + "px"; } if(touch.pageX<=0){//Over the left fdiv.style.left="0px"; }else if( touch.pageX >(screenWidth-parseInt(fdiv.clientWidth))){//Move over the right fdiv.style.left=(screenWidth-parseInt(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 event may conflict with web page scaling event in the mobile browser alert("Play your imagination"); }html
<!doctype html><html ><head> <meta charset="UTF-8"> <title>Document</title> </head><body> </body><script src="web-touch.js" type="text/javascript"></script></html>
Demo diagram