<!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. js中子页面父页面方法 变量相互调用

    (1)子页面调用父页面的方法或者变量: window.parent.方法()或者变量名window.parent相当于定位到父页面  之后的操作和在父页面中写代码一样写 window.parent.a ...

  2. 用DllImport引用的外部DLL文件如何通过clickonce发布

    在.net中非托管代码或非COM组件的外部DLL文件只能用DllImport的方式使用,但是在clickonce方式发布时不会自动包含到发布清单中去,办法是在项目中先把外部DLL文件作为普通文件添加进 ...

  3. Linux-详解inode节点

    Linux inode节点 inode查看命令 stat 功能:列出文件大小,文件所占的块数,块的大小,主设备号和次设备号,inode number,链接数,访问权限,uid,gid,atime,mt ...

  4. JavaScript跨域提交数据

    1.通过jsonp跨域    场景:假设前台有JS方法"crossJS", 1.1发送请求http://www.xxx.com/?callback=crossJS.(创建一个scr ...

  5. iOS设计 - 一款APP从设计稿到切图过程概述

    这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程,相当于工作流程的介绍.这里写的不是一种规范,只是一种工作方法,加上技术的更新是非常快的,大家在具体工作中,一定要灵活运用. 这里我 ...

  6. 创建Hello World程序（part-1）

    写在前面: 2006年,刚上大学,班上有几个计算机文盲,1分钟打二十几个字都困难,很不幸,我就是其中的一个.强烈的自尊心驱使我不停恶补,翻遍了图书馆的计算机文化基础,知耻而后勇...后来,C语言居然考 ...

  7. 多对多关系<EntityFramework6.0>

    无负载建立多对多关联的模型 原文中是Modeling a Many-to-Many Relationship with No Payload,虽然这么翻译也有点不准确,但是可以说明其目的,如下图所示, ...

  8. AVAssetReader+AVAssetReaderTrackOutput播放视频

    该文章引用自:http://www.jianshu.com/p/3d5ccbde0de1 IOS 微信聊天发送小视频的秘密(AVAssetReader+AVAssetReaderTrackOutput ...

  9. linux中redis安装

    一.登录redis官网下载redis-3.0.7.tar.gz 二.通过ftp工具上传至自己的服务器中 三.tar -zxvf redis-3.0.7.tar.gz解压 四.cd redis-3.0. ...

  10. Mongodb集群搭建的三种方式

    转自:http://blog.csdn.net/luonanqin/article/details/8497860 MongoDB是时下流行的NoSql数据库,它的存储方式是文档式存储,并不是Key- ...