移动端触摸移动小demo
生活随笔
收集整理的這篇文章主要介紹了
移动端触摸移动小demo
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
根據項目需要自己嘗試做了一個div塊的觸摸移動效果，用原生js寫的。
效果如下：
頁面的html文檔：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>拖動Demo</title><style type="text/Css">body{padding: 0;margin: 0;} .dragme{z-index:9999;position:fixed;top:30px;right: 5px;background:url('img/testbg.png') no-repeat;background-size:cover;width:80px;height:80px;} </style> </head> <body> <div id="moveid" class="dragme"> </div> <div style="height: 1000px;background: pink;"></div><script type="text/javascript" src="js/dragFun.js" ></script> </body> </html> 其中這行<div style="height: 1000px;background: pink;"></div>非常重要（單就這個demo來說），如果缺少這行代碼，那么圖片只能拖動一次，再次觸摸拖動就失效了，這應該是和文檔的高度有關。 js/dragFun.js實現原理分析： 1、需要知道開始觸摸時手指的初始位置（clientX、clientY）2、滑動過程中需要記錄下手指的位置
3、手指離開屏幕時根據邊界判斷確定div的位置
4、邊界判斷是重點
5、滑塊的移動改變的是transform：translate（x,y)；
示意圖： 我分為兩部分判斷：
初始值： var dragElem=document.getElementById(id) || document.querySelector('.'+elemName),tempX=0,tempY=0,startX,startY,dirX,dirY;var clientW=document.documentElement.clientWidth,clientH=document.documentElement.clientHeight,eleW=dragElem.offsetWidth,eleH=dragElem.offsetHeight,offset_l=dragElem.offsetLeft,offset_t=dragElem.offsetTop;
大方向：
1）div初始位置在右邊
1.1 一屏幕的中心線區分
1.1.1 屏幕的右側（1/2W范圍內）去除掉y軸方向的上方eleH和下方的eleH（也就是右邊上下黃線包圍的范圍）
如果他超出了屏幕右邊界，那么X的最大偏移值為（clientW-offset_l-eleW）；
if(offset_l>clientW/2){//div的初始位置在屏幕右側if(dirX>-(clientW/2-eleW/2) && dirY>-offset_t && dirY<clientH-(eleH+offset_t)){dirX=clientW-offset_l-eleW;} } 1.1.2 屏幕的左側（1/2W范圍內）去除掉y軸方向的上方eleH和下方的eleH（也就是左邊上下黃線包圍的范圍）
如果他超出了屏幕左邊界，那么X的最大偏移值為-(clientW-eleW)； if(offset_l>clientW/2){if(dirX<-(clientW/2-eleW/2) && dirY>-offset_t && dirY<clientH-(eleH+offset_t)){dirX=-(clientW-eleW);} } 1.1.3 屏幕剩余的上下eleH部分（上黃線與頂部、下黃線與底部包圍的區域，它的高度是div的高）
因為之前我沒有對這個區域做判斷，所在在測試的時候，如果把div拖到四個邊角，超出范圍后，他就會消失不見，不會再彈回邊界，所以我才知道我忘記判斷了，判斷如下： if(dirX>=clientW-offset_l-eleW){dirX=clientW-offset_l-eleW;
}else if(dirX<=-(clientW-eleW)){dirX=-(clientW-eleW); } 2）div初始位置在左邊（與上面的判斷差不多主要是注意位移偏移量的大小，方向，正負）
3）y軸方向的判斷不用區分左右邊，只需一次判斷即可。 if(dirY<=-offset_t){dirY=-offset_t; }else if(dirY>=clientH-(eleH+offset_t)){dirY=clientH-(eleH+offset_t); }
4）如果想讓div塊釋放的時候有緩動效果，就給它加個transition屬性
這個也得注意一下，在div塊剛剛觸摸時，得設置transition的duration為0s（單位不能少哦），不然拖動的過程會很慢，只需要在釋放后再加上就可以啦。
整個過程就這樣子結束啦，做完后想想還是挺容易的，就是在判斷的時候花費了點時間。不過過程還是學到了很多。
如果想知道完整代碼，到這里下載吧！！！
https://coding.net/u/U_can/p/mobieDragDemo/git
??
轉載于:https://www.cnblogs.com/U-can/p/4745709.html
總結
以上是生活随笔為你收集整理的移动端触摸移动小demo的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据库分组选 第一条
- 下一篇： Iframe难点备忘