html部分是一个div盒子
css部分
<style>div {background-color: pink;height: 100px;width: 100px;//这里要加绝对定位或者相对定位position: relative;}<style>
js部分
<script>var div = document.querySelector('div');//获取手指初始坐标var startX = 0;var startY = 0;//获取盒子原来的位置var x = 0;var y = 0;div.addEventListener('touchstart', function (e) {//计算手指的移动距离，手指移动之后的坐标减去手指原来的坐标startX = e.targetTouches[0].pageX;startY = e.targetTouches[0].pageY;//盒子原来的位置加手指移动的距离x = this.offsetLeft;y = this.offsetTop; //阻止默认的屏幕滚动e.preventDefault();});div.addEventListener('touchmove', function (e) {//计算手指的移动距离，手指移动之后的坐标减去手指原来的坐标var moveX = e.targetTouches[0].pageX - startX;var moveY = e.targetTouches[0].pageY - startY;//盒子原来的位置加手指移动的距离this.style.left = x + moveX + 'px';this.style.top = y + moveY + 'px';//阻止默认的屏幕滚动e.preventDefault();})</script>
