<!DOCTYPE HTML><HTML><Head> <MetaCharSet= ' Utf-8 '/> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/> <Metaname= "Viewport"content= "Width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> <Metaname= "Apple-touch-fullscreen"content= "YES" /> <Metaname= "Apple-mobile-web-app-status-bar-style"content= "BLACK" /> <title>Compatible phone with PC drag in percent calculation</title></Head><Body><Divstyle= "width:500px; height:500px; border:1px solid #ccc; position:relative; margin:0 Auto "><DivID= "Odiv"style= "width:100px;height:100px;background-color:red;position:absolute; top:0; left:0; Cursor:pointer"></Div></Div><Scriptsrc= "Jquery-1.11.1.min.js"type= "Text/javascript"></Script><Script> varOmask=document.getElementById ('Odiv'); varOdiv=$("#oDiv"); varODIVW=odiv.width ()/2; varIfkey=false; Odiv.on ("MouseDown", down); Odiv.on ("MouseMove", move); Odiv.on ("mouseout MouseUp", up); //Omask.addeventlistener ("Touchmove", move) functionDown (e) {e.preventdefault (); E.stoppropagation (); Ifkey=true; } functionUp (e) {e.preventdefault (); E.stoppropagation (); Ifkey=false; } functionMove (e) {varBodyw= -; varBodyh= -; if(Ifkey==true) {e.preventdefault ();//Block other events //E.preventdefault (); //If there's only one finger in the position of this element , if(E.type=="MouseMove"){ varOx=E.clientx-Bodyw-ODIVW; varOy=E.clienty; Document.title=(Oy); if(Ox< -) {Ox= -; }Else if(Ox> the) {Ox= the } if(Oy< -) {Oy= -; }Else if(Oy> the) {Oy= the; } varBfX=(Ox-ODIVW)*0.2; varBfy=(Oy-ODIVW)*0.2; OMask.style.left=(BfX)+"%"; OMask.style.top=(bfy)+"%"; } } }</Script></Body></HTML>
PC drag is calculated as a percentage