js移动端实现拖拽div效果

移动端实现拖拽效果

1. 先获取手指在DOM元素中的距离,和盒子本身的位置。

var startX = 0;  // 定义手指X轴初始坐标
var startY = 0;   // 定义手指Y轴初始坐标
var x = 0;   // 定义 盒子本身距离
var y = 0; 
div.addEventListener('touchstart',function (e) {
	startX = e.targetTouches[0].pageX // targetTouches 当前在DOM元素上手指有几根  [0] 代表 第一根手指
	startY = e.targetTouches[0].pageY
	x = this.offsetLeft;
	y = this.offsetTop;
});

2. 再利用手指滑动距离 - 在触摸手指距离就成了盒子移动距离了。
3. 再利用盒子本身的距离 + 手指移动距离就能实现拖拽效果啦！

div.addEventListener('touchmove',function (e) {
	var currentX = e.targetTouches[0].pageX - startX;
	var currentY = e.targetTouches[0].pageY - startY;
	div.style.left = currentX + x + 'px';
	div.style.top = currentY + y + 'px';
});