<!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</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:0px; left:0px; 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=(OX); if(Ox<ODIVW) {Ox=ODIVW}Else if(Ox>(Bodyw-ODIVW)) {Ox=Bodyw-ODIVW}if(Oy<ODIVW) {Oy=ODIVW}Else if(Oy>(Bodyh-ODIVW)) {Oy=Bodyh-ODIVW; } oMask.style.left=(Ox-ODIVW)+"px"; OMask.style.top=(Oy-ODIVW)+"px"; } } }</Script></Body></HTML>
PC Drag effect, drag band range