HTML5 移动端div块跟随手指拖动
2016-12-07 10:22
330 查看
移动端div块跟随手指拖动,pc端div根据鼠标拖动请用mousemove事件,代码如下请勿转载!
<!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"> <script type="text/javascript" src="js/jquery.1.9.1.js"></script> <title>div块跟随手指拖动</title> </head> <body> <div id="id"></div> <style type="text/css"> div{ width: 200px; height: 200px; background: #ccc; position: absolute; left: 0px; top: 100px; } </style> <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) { _x_start=e.touches[0].pageX; _y_start=e.touches[0].pageY; // console.log("start",_x_start) left_start=$("#id").css("left"); top_start=$("#id").css("top"); }) document.getElementById("id").addEventListener("touchmove",function(e) { _x_move=e.touches[0].pageX; _y_move=e.touches[0].pageY; // console.log("move",_x_move) $("#id").css("left",parseFloat(_x_move)-parseFloat(_x_start)+parseFloat(left_start)+"px"); $("#id").css("top",parseFloat(_y_move)-parseFloat(_y_start)+parseFloat(top_start)+"px"); console.log(parseFloat(_y_move)-parseFloat(_y_start)+parseFloat(top_start)); }) document.getElementById("id").addEventListener("touchend",function(e) { var _x_end=e.changedTouches[0].pageX; var _y_end=e.changedTouches[0].pageY; // console.log("end",_x_end) }) //阻止浏览器下拉事件 $('body').on('touchmove', function (event) {event.preventDefault();}); // or // document.addEventListener('touchmove', function(e){e.preventDefault()}, false); </script> </body> </html>
相关文章推荐
- html5 移动端的手指触屏事件
- Android自定义View圆形和拖动圆、跟随手指拖动效果
- html5移动端:元素拖动/触控touch(js)(jquery)
- 網頁設計% JS 移动端原生JS实现手指跟随触控滑动
- 移动端H5单页面跟随手指滑动切换组件PageSlider
- 基于zepto.js的移动端H5单页面跟随手指滑动切换控件pageSlider
- HTML5移动端拖动惯性
- Android实现拖动小球跟随手指移动效果
- Android自定义View圆形和拖动圆跟随手指拖动
- Android实现跟随手指拖动并自动贴边的View样式(实例demo)
- html5移动端:元素拖动/触控touch(js)(jquery)
- Slip——整屏滑动,移动端跟随手指滑动
- HTML5 移动端 手指事件
- 安卓中自定义View圆形和拖动圆、跟随手指拖动
- Android拖动小球跟随手指移动Demo
- HTML5 移动端好用的head
- android View 跟随手指移动的7种方式
- 自定义view,跟随手指滑动的圆球
- android 跟随手指移动的 view
- html5 图片拖动