生活随笔
收集整理的這篇文章主要介紹了
移动端拖动元素
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
移動端拖動元素
1. touchstart、touchmove、touched可以實現(xiàn)拖動元素
2. 但是拖動元素需要當前手指的坐標值，可以使用targetTouches[0]里面的pageX和pageY
3. 移動端拖動的原理：手指移動中，計算出手指移動的距離。然后用盒子原來的位置+手指移動的距離
4. 手指移動的距離手指滑動中的位置-手指剛開始觸摸的位置
拖動元素三部曲：
（1）觸摸元素 touchstart ：獲取手指初始坐標，同時獲得盒子原來的位置
（2）移動手指touchmove：計算手指的滑動距離，并且移動盒子
（3）手指離開：touchend
注意：手指移動也會觸發(fā)滾動屏幕，所以這里要阻止默認的屏幕滾動? e.preventDafault();
??
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{position: absolute;left: 0;width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><div></div><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;})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>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的移动端拖动元素的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
