This is a very simple feature of the front end, nothing complicated: Add a touch listener event to the DIV element, and then change the position state of the DIV element.
Here is a simple implementation code for a segment
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"><meta content= "width=device-width,initial-scale=1.0,maximum-scale=1.0" name= "viewport"/>
<meta name= "format-detection" content= "telephone = no"/><title>Drag the div element on the phone</title></Head><Body><DivID= "Indexbtn"style= "Width:100px;height:100px;background-color:black;position:absolute; "></Div><Script>window.onload=function(){ varindexbtn=document.getElementById ("indexbtn"); Indexbtn.addeventlistener ('Touchstart', Touch,false); Indexbtn.addeventlistener ('Touchmove', Touch,false); Indexbtn.addeventlistener ('Touchend', Touch,false); varx, y; functionTouch (event) {varEvent=Event||window.event; Switch(event.type) { Case "Touchstart": Console.log (event.touches[0]); X=parseint (event.touches[0].clientx); Y=parseint (event.touches[0].clienty); Break; Case "Touchend": Console.log (event.changedtouches[0]); Y=parseint (event.changedtouches[0].clienty); X=parseint (event.changedtouches[0].clientx); Indexbtn.style.top=y+"px"; Indexbtn.style.left=x+"px"; Break; Case "Touchmove": Event.preventdefault (); Y=parseint (event.touches[0].clienty); X=parseint (event.touches[0].clientx); Indexbtn.style.top=y+"px"; Indexbtn.style.left=x+"px"; Break; } }}</Script></Body></HTML>
Actually only listens to Touchmove also can achieve the effect. The addition of Touchstart and Touchend is a good extension for the future, if you want to do at the beginning or end of what effect, you can add code in the appropriate place.
Learning experience:
As a small white, a lot of things do not understand, so I often like console.log (), the corresponding objects and methods in the background display. Sometimes, you will find a lot of things you can use to get. Sometimes some parameters don't quite understand,
For example: Clientx and Pagex and so on. The simplest way is to Baidu a bit. And the quickest and most stupid way is to try it all by yourself.
HMTL on the phone div element drag