- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
- <title>div 块跟随手指拖动 </title>
- </head>
- <body>
- <div id="id" style="width:200px;height:200px;background:#ccc;position:absolute;left:0px;top:100px;"></div>
- <script type="text/javascript">
- var _x_start,_y_start,_x_move,_y_move,_x_end,_y_end,left_start,top_start;
- document.getElementById("id").addEventListener("touchstart",function(e)
- {
- var _CSS = getComputedStyle(this);
- _x_start=e.touches[0].pageX;
- _y_start=e.touches[0].pageY;
- left_start=parseInt(_css.left);
- top_start=parseInt(_css.top);
- });
- document.getElementById("id").addEventListener("touchmove",function(e)
- {
- _x_move=e.touches[0].pageX;
- _y_move=e.touches[0].pageY;
- this.style.left = parseFloat(_x_move)-parseFloat(_x_start)+parseFloat(left_start)+"px";
- this.style.top = parseFloat(_y_move)-parseFloat(_y_start)+parseFloat(top_start)+"px";
- });
- document.getElementById("id").addEventListener("touchend",function(e)
- {
- var _x_end=e.changedTouches[0].pageX;
- var _y_end=e.changedTouches[0].pageY;
- });
- // 阻止浏览器下拉事件
- document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
- </script>
- </body>
- </html>
来源: