手机端touch事件实现元素拖拽效果
生活随笔
收集整理的這篇文章主要介紹了
手机端touch事件实现元素拖拽效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這段時間在做一個手機相冊的效果，然后網上各種搜，而結果不盡人意，后來我突然想手機事件是否可以自己寫，就開始從拖拽做起了
我先從網上搜到了一份手機的touchstart和touchmove的方法。如下：
//touchstart事件
function touchSatrtFunc(e) {
e.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等
var touch = e.touches[0]; //獲取第一個觸點
var x = Number(touch.pageX); //頁面觸點X坐標
var y = Number(touch.pageY); //頁面觸點Y坐標
//記錄觸點初始位置
startX = x;
startY = y;
}
//touchmove事件
function touchMoveFunc(e) {
e.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等
var touch = e.touches[0]; //獲取第一個觸點
var x = Number(touch.pageX); //頁面觸點X坐標
var y = Number(touch.pageY); //頁面觸點Y坐標
//判斷滑動方向
if (x - startX != 0) {
console.log('左右滑動 :' + (x - startX) )//左右滑動
}
if (y - startY != 0) {
console.log('上下滑動 : '+ (y - startY) ) //上下滑動
}
}
然后在此基礎上我又寫了需要的html結構代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<style type="text/css">
*{margin: 0;padding: 0}
div{ 100px;height: 100px;background: #f00;position: absolute;top: 5%;left: 5%}
</style>
</head>
<body>
<input type="text">
<input type="text">
<div></div>
</body>
</html>
我一開始的思路是：
1，div實現拖動就要計算出div的left與top
2，首先我取到觸摸屏幕的點的坐標
3，其次我通過觸摸屏幕點的坐標和div的offsetTop與offsetLeft計算出觸摸點相對div頂部邊緣與左側邊緣的距離
4，最后我用觸摸點的坐標減去觸摸點相對div頂部邊緣與左側邊緣的距離得到div元素的位置坐標賦值，以達到定位div的目的
5，將touchstart與touchmove事件綁定在document對象上，來實現最終拖動效果
然后是我依照此思路寫的代碼，如下：
var oDiv = document.getElementsByTagName('div')[0]; //獲取可拖動元素
var oIpt = document.getElementsByTagName('input')[0]; //記錄拖動元素位置
var oIpt1 = document.getElementsByTagName('input')[1]; //記錄觸點位置
var oL,oT;
//touchstart事件
function touchSatrtFunc(e) {
e.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等
var touch = e.touches[0]; //獲取第一個觸點
var x = Number(touch.pageX); //頁面觸點X坐標
var y = Number(touch.pageY); //頁面觸點Y坐標
//記錄觸點初始位置
startX = x;
startY = y;
}
//touchmove事件
function touchMoveFunc(e) {
e.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等
oL = oDiv.offsetLeft; //可拖動元素距離頁面左側的距離
oT = oDiv.offsetTop; //可拖動元素距離頁面頂部的距離
var touch = e.touches[0]; //獲取第一個觸點
var x = Number(touch.pageX); //頁面觸點X坐標
var y = Number(touch.pageY); //頁面觸點Y坐標
var sL = x - oL; //獲取頁面觸點距離div左側的距離
var sT = y - oT; //獲取頁面觸點距離div頂部的距離
oDiv.style.left = (x-sL) +'px';
oDiv.style.top = (y-sT)+'px';
alert(e.touches.length)
oIpt1.value = "觸點位置：" +x +":"+y;
oIpt.value = "元素位置："+oL+":"+oT+","+sL+":"+sT;
}
oDiv.addEventListener('touchstart',touchSatrtFunc,false);
oDiv.addEventListener('touchmove',touchMoveFunc,false);
然而實際測試時，這個出現了很大的問題，最主要的div拖動效果一點反應也沒有，一開始可是愁苦了我，我一直在想沒怎么回事，然而一直沒有尋到問題所在。
這個時候經過請教，修改后的思路：
1，首先在touchstart時得到div的offsetTop與offsetLeft的值
2，然后計算出touchmove時的實時觸摸坐標和一開始touchstart時的坐標的差值坐標
3，將差值坐標與一開始touchstart時的div的offsetTop和offsetLeft相加得到新的div的位置坐標
4，將touchstart與touchmove事件綁定在div元素上
具體代碼如下：
var oDiv = document.getElementsByTagName('div')[0], //獲取可拖動元素
oIpt = document.getElementsByTagName('input')[0], //記錄拖動元素位置
oIpt1 = document.getElementsByTagName('input')[1], //記錄觸點位置
startX = "",
startY = "",
startPositionX = "",
startPositionY = "";
//touchstart事件
function touchSatrtFunc(e) {
e.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等
var touch = e.touches[0]; //獲取第一個觸點
var x = Number(touch.pageX); //頁面觸點X坐標
var y = Number(touch.pageY); //頁面觸點Y坐標
//記錄觸點初始位置
startX = x;
startY = y;
//可拖動元素距離頁面頂部的距離
startPositionY = oDiv.offsetTop;
//可拖動元素距離頁面左側的距離
startPositionX = oDiv.offsetLeft;
}
//touchmove事件
function touchMoveFunc(e) {
e.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等
var touch = e.touches[0]; //獲取第一個觸點
var x = Number(touch.pageX); //頁面觸點X坐標
var y = Number(touch.pageY); //頁面觸點Y坐標
oIpt.value = "元素位置：" +startPositionX +":"+startPositionY;
oIpt1.value = "觸點位置：" +x +":"+y;
oDiv.style.left = startPositionX + (x-startX) +'px';
oDiv.style.top = startPositionY + (y-startY)+'px';
// oIpt.value = "元素位置："+oL+":"+oT+","+sL+":"+sT;
//判斷滑動方向 if (x - startX != 0) {console.log('左右滑動 :' + (x - startX) )//左右滑動 } if (y - startY != 0) { console.log('上下滑動 : '+ (y - startY) ) //上下滑動 //}
}
oDiv.addEventListener('touchstart',touchSatrtFunc,false);
oDiv.addEventListener('touchmove',touchMoveFunc,false);
經過測試，這個能夠完美的執行出我想要的效果。
然而我依舊被原先的思路所困擾，因此我又從新梳理了一遍我以前的代碼流程，最后終于發現問題所在，問題所在就是（這里只提供水平坐標，縱坐標同理）：
我賦值給div橫坐標的值為：x-sL，然而sL = x - oL；因此最后得到的值為固定的oL，因此我之前寫的div一直無法拖動。
最后我又對最初代碼進行更改，終于實現了，如下：
var oDiv = document.getElementsByTagName('div')[0]; //獲取可拖動元素
var oIpt = document.getElementsByTagName('input')[0]; //記錄拖動元素位置
var oIpt1 = document.getElementsByTagName('input')[1]; //記錄觸點位置
var oL,oT,sL,sT;
//touchstart事件
function touchSatrtFunc(e) {
e.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等
var touch = e.touches[0]; //獲取第一個觸點
var x = Number(touch.pageX); //頁面觸點X坐標
var y = Number(touch.pageY); //頁面觸點Y坐標
//記錄觸點初始位置
startX = x;
startY = y;
oL = oDiv.offsetLeft; //可拖動元素距離頁面左側的距離
oT = oDiv.offsetTop; //可拖動元素距離頁面頂部的距離
sL = x - oL; //獲取頁面觸點距離div左側的距離
sT = y - oT; //獲取頁面觸點距離div頂部的距離
}
//touchmove事件
function touchMoveFunc(e) {
e.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等
var touch = e.touches[0]; //獲取第一個觸點
var x = Number(touch.pageX); //頁面觸點X坐標
var y = Number(touch.pageY); //頁面觸點Y坐標
oDiv.style.left = (x-sL) +'px';
oDiv.style.top = (y-sT)+'px';
oIpt1.value = "觸點位置：" +x +":"+y;
oIpt.value = "元素位置："+oL+":"+oT+","+sL+":"+sT;
}
oDiv.addEventListener('touchstart',touchSatrtFunc,false);
oDiv.addEventListener('touchmove',touchMoveFunc,false);
以上！在此特意感謝--劇中人的幫助。
總結
以上是生活随笔為你收集整理的手机端touch事件实现元素拖拽效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 英文环境服务器的中文乱码问题的解决
- 下一篇： GPU Gems1 - 26 OpenE