<!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">&uarr;</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>

移动端touch事件——单指拖拽的更多相关文章

  1. 在viewPager中双指缩放图片，双击缩放图片，单指拖拽图片

    我们就把这个问题叫做图片查看器吧,它的主要功能有: (项目地址:https://github.com/TZHANHONG/ImageViewer/releases/tag/1.0,里面的MyImage ...

  2. H5案例分享：移动端touch事件判断滑屏手势的方向

    移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...

  3. 移动端多个DIV简单拖拽功能

    移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...

  4. 移动端H5混合开发，Touch触控，拖拽，长按, 滑屏 实现方案

    概述 近期由于产品快速原型开发的需要,不想用原声的方式开发App两端一起搞时间来不及,目前产品处于大量上feature的阶段,采用混合开发是最合适的选择,所以花了3天的时间研究怎么去实现移动端,拖拽, ...

  5. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  6. 移动端 touch 事件的originalEvent

    对于移动端的触摸事件,我们通过touchstart.touchmove.touchend实现,PC端一般使用mousedown.mousemove.mouseup实现. 我们获取事件坐标,原生js获取 ...

  7. 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

    这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...

  8. 移动端Touch事件基础

    1.三个常用的移动端事件 ontouchstart 手指按下时触发 ontouchmove 手指移动时触发 ontouchend 手动抬起时触发 注意:这些事件当作事件属性使用时,不兼容谷歌浏览器. ...

  9. 移动端touch事件封装

    <meta charset="utf-8"><meta name="viewport" content="width=device- ...

随机推荐

  1. Qt 入门 ---- 如何在程序窗口显示图片？

    步骤: 1. 选择资源(准备图片) 2. 加载资源(导入图片) 3. 使用资源(显示图片) 具体操作流程: ① 从网上寻找合适的图片素材,下载到本地,在项目根目录下创建一个images文件夹存储程序中 ...

  2. create-react-app 创建的项目执行npm run eject后，运行报错

    create-react-app 创建的项目执行npm run eject后,运行报错:Cannot find module '@babel/plugin-transform-react-jsx-so ...

  3. springboot整合mybatis源码分析

    springboot整合mybatis源码分析 本文主要讲述mybatis在springboot中是如何被加载执行的,由于涉及的内容会比较多,所以这次只会对调用关系及关键代码点进行讲解,为了避免文章太 ...

  4. 监控实战之Prometheus

    author:JevonWei 版权声明:原创作品 目录 一 背景 二 部署Prometheus Server Prometheus 主配置文件 targets 节点配置文件 rules 告警规则 运 ...

  5. （原创）[.Net] 进程间通信框架（基于共享内存）——SimpleMMF

    一.前言 进程间通信技术的应用非常广泛,在Windows下常用的实现方式有:管道.Socket.消息.本地文件.共享内存等,每种方式都有各自适应的场景. 在进行大数据交换时,最优的方式便是共享内存. ...

  6. 使用Fileupload完成文件的上传下载

    目录 使用Fileupload完成文件的上传下载 为什么需要进行文件上传下载? 引入jar包 文件上传 注意事项 编写一个简单的文件上传jsp页面 编写Servlet Student类用于封装数据,后 ...

  7. 【开源】这可能是封装微信 API 最全的 .NET SDK 了

    ## 缘起 今年公司某个项目需要全面接入微信支付 V3 版 API.起初觉得,2014 年微信支付就已上线了 V3 版 API,这都 2021 年了,就算官方不给力,怎么着社区也该有几个造好的 .NE ...

  8. linux笔记全（无图版）

    1.ls 查看当前目录下的所有内容 黑色的是文件,蓝色的是文件夹,也就是目录 2.rm -f anaconda-ks. cfg 彻底删除文件(如不确定,则需要先保存备份,也就是快照) 3.ifconf ...

  9. Java Fork/Join

    Fork/Join框架 Fork/Join 以递归方式将可以并行的任务拆分成更小的任务,然后将每个子任务的结果合并起来生成整体结果. 这个过程其实就是分治算法的并行版本,图解如下: 如何使用 我们要使 ...

  10. 网络图片下载，commons IO包

    网络图片下载,commons IO包 导入commons-io包 commons-io包下载路径: http://www.apache.org/ 项目下新建lib包,将lib包添加为库 实现多线程下载 ...