<!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. SQL Server 从数据库中查询去年的今天的数据的sql语句

    因为最近的项目的一个小功能需要实现当前数据和历史的今天做一个对比.在网上也查了很久,很多都是实现一个月内的,一年内的所有数据,昨晚突然就找到了下面的实现方法,在SQL Server2008中试了一下, ...

  2. Centos7无法上网

    详情参照步骤:http://www.cnblogs.com/yxyht/p/5063505.html

  3. libsvm数据处理初略流程

  4. Delphi容器类之---Tlist，TStringlist，THashedStringlist的效率比较

    转载自:http://www.ylzx8.cn/windows/delphi/73200.html 本人在做一个测试,服务器是IOCP的,我假定最大链接数是50000个. 测试背景:如果每个链接之间的 ...

  5. 用 CallerMemberName Attribute 和 EqualityComparer 统一处理类的属性值变化

    当需要实现类似 INotifyPropertyChanged 这样的接口的时候,每一个属性去判断值是否变化,然后触发事件什么的,太麻烦了,如果能用一个方法统一处理就好了. 好在真的可以做到.这个博文说 ...

  6. JS去重的几种方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. HDU 3535 AreYouBusy （混合背包）

    题意:给你n组物品和自己有的价值s,每组有l个物品和有一种类型: 0:此组中最少选择一个 1:此组中最多选择一个 2:此组随便选 每种物品有两个值:是需要价值ci,可获得乐趣gi 问在满足条件的情况下 ...

  8. VirusAnti_didiwei使用说明

    前言 前段时间说要写的一个专杀框架敌敌畏,后改为强撸敌敌畏,以彰显样本查杀时的气势,现在第一版已经完成了,如下图所示,使用的时候强烈建议控制台使用放大模式,这样就可以看见我花了半天才画好了logo , ...

  9. android---shape.xml属性

    solid:填充android:color指定填充的颜色 gradient:渐变android:startColor和android:endColor分别为起始和结束颜色, 另外渐变默认的模式为and ...

  10. mybatis自增长插入id

    第一种: <insert id="insertUser" parameterClass="ibatis.User"> <selectKey r ...