<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

        <style>

            body {

                height: 2000px;

            }

            #block {

                width:200px;

                height:200px;

                background-color: red;

                position: absolute;

                left: 0;

                top: 0;

            }

        </style>

    </head>

    <body>

        <div>

            touchstart,touchmove,

            touchend,touchcancel

        </div>

        <div id="block"></div>

<script>

        // 获取节点

        var block = document.getElementById("block");

        var oW,oH;

        // 绑定touchstart事件

        block.addEventListener("touchstart", function(e) {

            console.log(e);

            var touches = e.touches[0];

            oW = touches.clientX - block.offsetLeft;

            oH = touches.clientY - block.offsetTop;

            //阻止页面的滑动默认事件

            document.addEventListener("touchmove",defaultEvent,false);

        },false)

        block.addEventListener("touchmove", function(e) {

            var touches = e.touches[0];

            var oLeft = touches.clientX - oW;

            var oTop = touches.clientY - oH;

            // 边界判断

            if(oLeft < 0) {

                oLeft = 0;

            }else if(oLeft > document.documentElement.clientWidth - block.offsetWidth) {

                oLeft = (document.documentElement.clientWidth - block.offsetWidth);

            }

            if(oTop<0){

                oTop=0;

            }else if(oTop > document.documentElement.clientHeight - block.offsetHeight){

               oTop=(document.documentElement.clientHeight - block.offsetHeight);

            }

            block.style.left = oLeft + "px";

            block.style.top = oTop + "px";

        },false);

        block.addEventListener("touchend",function() {

            document.removeEventListener("touchmove",defaultEvent,false);

        },false);

        function defaultEvent(e) {

            e.preventDefault();

        }

</script>

    </body>

</html>

注：本例在谷歌浏览器的模拟器上测试，未进行真机测试！

touchstart、touchmove、touchend 实现移动端上的触屏拖拽的更多相关文章

  1. 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置

    前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...

  2. 获取touchstart,touchmove,touchend 坐标

    简单说下如何用jQuery 和 js原生代码获取touchstart,touchmove,touchend 坐标值: jQuery 代码: $('#id').on('touchstart',funct ...

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

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

  4. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  5. 移动端touchstart,touchmove,touchend

    近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...

  6. touchstart,touchmove,touchend触摸事件的小小实践心得

    近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...

  7. 移动端touch事件——单指拖拽

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  8. 移动端 微信 网易 触屏滑动回弹菜单(css版)

    总结一下: 有点:网易新闻,微信 热文 都是 -webkit-overflow-scrolling: touch;实现,css实现,轻巧: bug: 部分安卓浏览器(uc,自带)  只支持持续滑动,不 ...

  9. js实现文件的上传和输出,拖拽上传图片

    js文件上传 文件下载 以前的文件的下载都是在服务器,现在也是放在服务器比较好,有时候为了一些开发的方便,我们临时把处理的数据就放在了本地,然后自己访问.这个也是可以的. 1.利用html5的 Fil ...

随机推荐

  1. JSP复习整理（二）基本语法

    最基础的整理.. 一.语句声明 <%@ page language="java" contentType="text/html; charset=UTF-8&quo ...

  2. iOS 9学习系列：打通 iOS 9 的通用链接（Universal Links）

    在WWDC 2015 上, Apple 为 iOS 9 宣布了一个所谓 通用链接 的深层链接特性, 视频地址为 [无缝链接到您的 App].虽然它不是一个必须实现的功能, 但还是需要引起一些注意. 在 ...

  3. Eclipse Java注释模板设置详解

    设置注释模板的入口: Window->Preference->Java->Code Style->Code Template 然后展开Comments节点就是所有需设置注释的元 ...

  4. python的异常处理

    在所有的程序中,都会遇到异常,有些异常是代码编写的时候产生的,在前期过程中可能会直接导致程序无法运行.这一类的异常,在编写代码的时候,程序可以直接排查修改.但有些异常,是在程序运行过程中产生的,可能是 ...

  5. C#递归、动态规划计算斐波那契数列

    //递归         public static long recurFib(int num)         {             if (num < 2)              ...

  6. linux学习日记之老男孩

    2016年10月5日企业面试题:cp 命令复制文件是如果有覆盖可能的话如何去除确认步骤,如:将/mnt/text.txt 复制 到/temp/text.txt,去除覆盖确认命令.方法:1.加全路径的c ...

  7. C语言的可变参数在Linux(Ubuntu)与Windows下注意点

    基本上C语言的可变参数原理在不同平台和不同编译器下基本类似(通过函数入栈,从右向左,从高位到低位地址),不过部分实现会有所不同:在使用中需要注意的是: va_list 为char 类型指针,部分调用如 ...

  8. C#远程时间同步助手软件设计

    C#远程时间同步助手软件设计 本程序才C#语言开发,实现远程时间同步功能,可以将本地时间每隔一段时间与时间服务器时间进行同步!不足之处还望见谅! 软件开发环境:Visual Studio 2010 软 ...

  9. 17.Java 反射机制

    1.反射的定义 反射之中包含了一个"反"的概念,所以要想解释反射就必须先从"正"开始解释,一般而言,当用户使用一个类的时候,应该先知道这个类,而后通过这个类产生 ...

  10. PowerDesigner导出SQL脚本

    1. 先创建E-R图模型