<!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. STM32学习及应用笔记一：SysTick定时器学习及应用

    这几年一直使用STM32的MCU,对ARM内核的SysTick计时器也经常使用,但几乎没有仔细了解过.最近正好要在移植一个新的操作系统时接触到了这块,据比较深入的了解了一下. 1.SysTick究竟是 ...

  2. Ubuntu 12.04 安装 Apache2+PHP5+MySQL

    LAMP是Linux web服务器组合套装的缩写,分别是Apache+MySQL+PHP.此教程教大家如何在Ubuntu 12.04 LTS server 上安装Apache2服务器,包括PHP5(m ...

  3. SpringMVC后台接收list类型的数据的实现方式

    一.背景 最近在做一些东西的时候,遇到一个需要Springmvc后台接收list类型数据的需求,几经辗转才完美解决了这个问题,今天记下来方便以后使用,也分享给需要的小伙伴们~ 二.实现方式 1.实现方 ...

  4. 解决java.lang.NoClassDefFoundError: org/objectweb/asm/util/TraceClassVisitor

    方案一: <dependency> <groupId>asm</groupId> <artifactId>asm-all</artifactId& ...

  5. AngularJs 通过 ocLazyLoad 实现动态（懒）加载模块和依赖

    好了,现进入正题,在 AngularJs 实现动态(懒)加载主要是依赖于3个主JS文件和一段依赖的脚本. 实现的过程主要是引用3个主要的JS文件 <script src="angula ...

  6. C#重启IIS指定网站和指定应用程序池

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. QT，静态变量要记得初始化

    //DbUtil.h #ifndef DBUTIL_H #define DBUTIL_H using namespace std; QString md5Encode(QString passwd); ...

  8. QT编译时 cc1plus进程占用大量内存卡死问题解决

    QT5.7 做一个demo编译时,内存几乎完全消耗,卡死.经尝试发现是添加资源文件过大导致(不知是单个文件过大触发还是文件总共过大触发)的.我的资源文件工136M,单个最大是125M左右. 解决方法是 ...

  9. Unity IOS Build的Graphics API最好是固定Opengl ES 2.0

    不要选择Automatic也不要选择Metal,因为这个选项可能会导致app在Iphone6上出现crash. 一个类似的crash堆栈: http://stackoverflow.com/quest ...

  10. [leetcode] 数字游戏

    169. Majority Element Given an array of size n, find the majority element. The majority element is t ...