<!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触摸事件的小小实践心得

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

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

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

  3. 手机端touchstart,touchmove,touchend事件,优化用户划入某个可以点击LI的效果

    在我们滑动手机的时候,如果LI或者DIV标签可以点击,那么在移动端给用户一个效果 /*id为添加效果LI上的UL的ID,或者是当前DIV的ID*/ function doTouchPublic(id) ...

  4. touchstart,touchmove,touchend事件 写法

    jQuery写法: $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0]; var ...

  5. JQuery 获取touchstart,touchmove,touchend 坐标

    JQuery写法: $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0]; var ...

  6. jQuery的touchstart,touchmove,touchend的获取位置

    $('#webchat_scroller').on('touchstart',function(e) { var touch = e.originalEvent.targetTouches[0]; v ...

  7. angulaijs中的ng-upload-file与阿里云oss服务的结合,实现在浏览器端上传文件到阿里云(速度可以达到1.5M)

    2015-10-26 angularjs结合aliyun浏览器端oos文件上传加临时身份验证例子 在服务端获取sts 源码: public class StsServiceSample { // 目前 ...

  8. 移动端 slide拖拽

    <html> <head> <meta charset="UTF-8"> <meta name="viewport" ...

  9. 触屏touchstart 与 click

    设计效果:当手指点击或触摸红框线menuList之外的部分时,弹框menuList消失. 问题:在优化触屏版的时候发现如图问题,当menuList弹出,手指触摸屏幕向下滑动时,menuList弹框不消 ...

随机推荐

  1. CSS浮动、定位

    这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...

  2. 多线程NSInvocationOperation(NSOperationQueue)的基本用法

        #import "ViewController.h" @interface ViewController () @end @implementation ViewContr ...

  3. 0924Linux常用命令

    写的不错 转载了,有需要的同学们,可以多多学习,适合小白哦 http://blog.csdn.net/xiaoguaihai/article/details/8705992/ 关于最后增加一点 tar ...

  4. 对象的constructor属性

    对象的constructor属性, 最初是用来标识对象类型的. 比如 ,我们定义一个 Person类,然后实例化两个对象. function Person(name, age, job){this.n ...

  5. 一步一步来做WebQQ机器人-(一)(验证码)

    × Well done! 为了探究webqq的http请求流程和数据交互,我付出了很多心血. 写下这篇文章!!!这是我逝去的青春 系列写完之后我会把源码打包奉上~ ------我的征途是星辰大海 预计 ...

  6. iOS初级数据持久化 沙盒机制 归档与反归档

    数据持久化就是数据保存成文件,存储到程序中的沙盒中. 沙盒构成 Document 存储用户数据,需要备份的信息 Caches 缓存文件, 程序专用的支持文件 Temp 临时文件 通过代码查找程序沙盒的 ...

  7. sublime text 快速补全

    sublime text 快速补全 关于补全,其实有很多,记录一些常用的在这里,忘记了可以查找 nav>ul>li    <nav>          <ul>  ...

  8. [HTML]页面间传值的五种方法

    一.QueryString传值:1. 这是最简单的传值方式,但缺点是传的值会显示在浏览器的地址栏中且不能传递对象,只适用于传递简单的且安全性要求不高的整数值,例如: 2. 新建一个WEB项目,添加一个 ...

  9. 关于【bootstrap modal 模态框弹出瞬间消失的问题】

    前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...

  10. 利用CGLib实现动态代理实现Spring的AOP

    当我们用Proxy 实现Spring的AOP的时候, 我们的代理类必须实现了委托类的接口才能实现. 而如果代理类没有实现委托类的接口怎么办? 那么我们就可以通过CGLib来实现 package cn. ...