<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" /> <title>2-5单指拖拽</title> <style> body{ height: 2000px; } .backtop{ position: fixed; right: 20px; bottom: 20px; width: 45px; height: 45px; line-height: 45px; text-align: center; background-color: rgba(0,0,0,0.6); border-radius: 50%; color: #fff; font-size: 30px; -webkit-tap-highlight-color: transparent; } </style> </head> <body> <a href="#" id="backtop" class="backtop">↑</a> <script> /* diffPoint是和startPoint一个差值，就是移动后和初始值的差值 movePoint是为move函数使用的，表示计算好的移动距离 */ function drag(el,options){ options.x = typeof options.x !== 'undefined' ? options.x : true; options.y = typeof options.y !== 'undefined' ? options.y :false; if(!options.x && !options.y) return; //如果禁止了x轴和y轴拖动,返回. var curPoint = { x:0, y:0 }; var startPoint = {}; //move了才触发end,否则不触发end事件 var isTouchMove = false; el.addEventListener('touchstart',handleStart,false); el.addEventListener('touchmove',handleMove,false); el.addEventListener('touchend',handleEnd,false); function handleStart(ev){ var touch = ev.changedTouches[0]; startPoint.x = touch.pageX; startPoint.y = touch.pageY; } function handleMove(ev){ //阻止有滚动条的默认行为,也可以在touchstart里面写 ev.preventDefault(); isTouchMove = true; var touch = ev.changedTouches[0]; var diffPoint = {}; var movePoint = { x:0, y:0 }; diffPoint.x = touch.pageX - startPoint.x; diffPoint.y = touch.pageY - startPoint.y; if(options.x){ movePoint.x = diffPoint.x + curPoint.x; } if(options.y){ movePoint.y = diffPoint.y + curPoint.y; } move(el,movePoint.x,movePoint.y); } function handleEnd(ev){ if(!isTouchMove) return; //手指抬起时更新curPoint var touch = ev.changedTouches[0]; curPoint.x += touch.pageX - startPoint.x; curPoint.y += touch.pageY - startPoint.y; isTouchMove = false; } function move(el,x,y){ x = x||0; y = y||0; el.style.transform = 'translate3d(' +x+ 'px,' +y+ 'px,0)'; } } </script> <script> var backtop = document.getElementById('backtop'); drag(backtop,{ x:true, //表示x轴可以拖动 y:true //表示y轴可以拖动 }); /* var curPoint = { x:0, y:0 } backtop.addEventListener('click',function(){ move(this,-10+curPoint.x,-10+curPoint.y); curPoint.x += -10; curPoint.y += -10; },false); function move(el,x,y){ x = x || 0; y = y || 0; el.style.transform = 'translate3d('+x+'px, '+y+'px,0)' } */ </script> </body> </html>