& lt; ! DOCTYPE html>
<meta charset="utf-8" & gt;
<meta name="viewport" content="width=device - width, initial - scale=1.0" & gt;
<style>
* {
padding:0;
margin:0;
}
The box {
Width: 200 px;
Height: 200 px;
Background - color: rosybrown;
/* position: absolute; */
}
</style>
<body>
<script>
Var box=document. QuerySelector (' box ');
Var startX=0;
Var startY=0;
Var x=0;
Box. AddEventListener (' touchstart ', function (e) {
StartX=e. argetTouches [0]. PageX;
The console. The log (startX)
})
Box. AddEventListener (' touchmove ', function (e) {
Var moveX=e. argetTouches [0]. PageX - startX;
The console. The log (box. The offsetLeft);
This. Style. Transform='translateX (px)' + x + ' ';
This. Style. Transform='translateX (px)' + moveX + ' ';
The console. The log (e);
})
Box. AddEventListener (' touchend ', function () {
})
</script>