<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <title></title> <Metaname= "Viewport"content= "Width=device-width, User-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <style>Body{Height:2000px; }#block{width:200px;Height:200px;Background-color:Red;position:Absolute; Left:0;Top:0; } </style> </Head> <Body> <Div>Touchstart,touchmove, Touchend,touchcancel</Div> <DivID= "Block"></Div><Script> //Get node varBlock=document.getElementById ("Block"); varOw,oh; //Binding Touchstart EventsBlock.addeventlistener ("Touchstart", function(e) {console.log (e); vartouches=e.touches[0]; OW=Touches.clientx-Block.offsetleft; OH=Touches.clienty-Block.offsettop; //block sliding default events for pagesDocument.addeventlistener ("Touchmove", DefaultEvent,false); },false) Block.addeventlistener ("Touchmove", function(e) {vartouches=e.touches[0]; varOleft=Touches.clientx-OW; varOTop=Touches.clienty-OH; if(Oleft< 0) {Oleft= 0; }Else if(Oleft>Document.documentElement.clientWidth-block.offsetwidth) {oleft=(Document.documentElement.clientWidth-block.offsetwidth); } block.style.left=Oleft+ "px"; Block.style.top=OTop+ "px"; },false); Block.addeventlistener ("Touchend",function() {Document.removeeventlistener ("Touchmove", DefaultEvent,false); },false); functionDefaultEvent (e) {e.preventdefault (); }</Script> </Body></HTML>
Note: This example is tested on a Google browser simulator and is not tested on a real machine!
Touchstart, Touchmove, touchend to achieve touch screen drag on the mobile side
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
