<!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. Erlang--proplists结构解析

    proplists 模块适用数据量较少的场景,处理配置文件和函数选项时常用.proplists对内部数据结构是Key-Value键值对形式,第一个元素做key用来查询和删除,如果一个key有多个值就会 ...

  2. 缓存淘汰算法--LRU算法

    1. LRU1.1. 原理 LRU(Least recently used,最近最少使用)算法根据数据的历史访问记录来进行淘汰数据,其核心思想是"如果数据最近被访问过,那么将来被访问的几率也 ...

  3. tp框架之session

    系统提供了Session管理和操作的完善支持,全部操作可以通过一个内置的session函数完成,该函数可以完成Session的设置.获取.删除和管理操作. session初始化设置 如果session ...

  4. notepad++快捷键

    notepad++现在是我最常用的文本编辑工具,其中使用的列模式编辑,也是很好使用的. 基本的快捷键: Ctrl-C,Ctrl-X,Ctrl-V,Ctrl-Y,Ctrl-A,Ctrl-F,Ctrl-S ...

  5. 【转载】关于treeview的多层显示的科学用法！

    http://blogs.msdn.com/b/mikehillberg/archive/2009/10/30/treeview-and-hierarchicaldatatemplate-step-b ...

  6. adv

    1. 对产品质量的认知理念,不仅是是确保没问题,而是通过自身与团队的价值提升产品的质量.潜在问题,竞类产品用户体验,bug产生分析图,流程控制 2. 责任心特质,正能量,热情激情,并且能感染团队成员和 ...

  7. Chrome 中的彩蛋，一款小游戏，你知道吗？

    今天看到一篇文章,介绍chrome中的彩蛋,带着好奇心进去看了一眼,没想到发现了一款小游戏,个人觉得还不错,偶尔可以玩一下,放松放松心情!^_^ 当 Chrome 无法连接到互联网时, 或者上着网突然 ...

  8. 安装SVN客户端重启电脑之后，右键未出现SVN选项的原因

    今天安装SVN客户端明明安装成功,电脑也重启过了,但是就是在右键里找不到SVN,百度了很久,删注册表.建用户组之类的方法都试过了,但是都没有效果. 后来才找到真正的原因,我的安装包是32位的,系统是6 ...

  9. 关于在django框架里取已登录用户名字的问题

    在 views里取值是这样的 request.user.username而在模板页面取值是这样的:{{request.user}} 判断是否通过验证是这样的 {% if request.user.is ...

  10. [NHibernate]查看NHibernate生成的SQL语句

    最近接触到一个用Spring.Net结合NHIbernate的项目,第一次使用,有很多配置,数据操作一旦出问题,很难找到原因,那么如何查看NHibernate发送给数据库的SQL语句呢? 当然我们可以 ...