1、 
Pan事件：在指定的dom区域内，一个手指放下并移动事件，即触屏中的拖动事件。这个事件在屏触开发中比较常用，如：左拖动、右拖动等，如手要上使用QQ时向右滑动出现功能菜单的效果。该事件还可以分别对以下事件进行监听并处理：

Panstart：拖动开始、Panmove：拖动过程、Panend：拖动结束、Pancancel：拖动取消、Panleft：向左拖动、Panright：向右拖动、Panup：向上拖动、Pandown：向下拖动

2、 
Pinch事件：在指定的dom区域内，两个手指（默认为两个手指，多指触控需要单独设置）或多个手指相对（越来越近）移动或相向（越来越远）移动时事件。该事件事以分别对以下事件进行监听并处理：

Pinchstart：多点触控开始、Pinchmove：多点触控过程、Pinchend：多点触控结束、Pinchcancel：多点触控取消、Pinchin：多点触控时两手指距离越来越近、Pinchout：多点触控时两手指距离越来越远

3、 
Press事件：在指定的dom区域内触屏版本的点击事件，这个事件相当于PC端的Click事件，该不能包含任何的移动，最小按压时间为500毫秒，常用于我们在手机上用的“复制、粘贴”等功能。该事件分别对以下事件进行监听并处理：

Pressup：点击事件离开时触发

4、 
Rotate事件：在指定的dom区域内，当两个手指或更多手指成圆型旋转时触发（就像两个手指拧螺丝一样）。该事件分别对以下事件进行监听并处理：

Rotatestart：旋转开始、Rotatemove：旋转过程、Rotateend：旋转结束、Rotatecancel：旋转取消

5、 Swipe事件：在指定的dom区域内，一个手指快速的在触屏上滑动。即我们平时用到最多的滑动事件。

Swipeleft：向左滑动、Swiperight：向右滑动、Swipeup：向上滑动、Swipedown：向下滑动

6、Tap事件：在指定的dom区域内，一个手指轻拍或点击时触发该事件(类似PC端的click)。该事件最大点击时间为250毫秒，如果超过250毫秒则按Press事件进行处理。

<!DOCTYPE html>

<html> <head>

<title>Hammer类库实现拖拽</title>

<meta charset="utf-8" />

<script type="text/javascript" src="js/screen_adapt.js">

</script>

<style type="text/css">

body{ width: 640px; }

#source{ width: 600px; height: 300px; margin: 0 auto; border: 1px solid red; }

#destinition{ width: 600px; height: 300px; margin: 0 auto; border: 1px solid black; }

#move-box{ background-color: black; width: 80px; height: 80px; position: absolute; top: 0px; left: 0px; }

</style>

</head>

<body>

<div id="source"> <div id="move-box"></div> </div> <div id="destinition"></div>

<script type="text/javascript" src="js/jquery-2.2.0.js"></script>

<script type="text/javascript" src="js/hammer.min.js"></script>

<script type="text/javascript">

//获取相关CSS属性

var getCss = function(o,key){ return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; };

function drag(element){

element.style.top = getCss(element,"top");

element.style.left = getCss(element,"left");

var hammer = new Hammer(element);//hammer实例

var x = 0; var y = 0;

hammer.on('panstart',function(event){ x = parseInt(element.style.left); y = parseInt(element.style.top); });

hammer.on('panmove',function(event){ element.style.top = y + event.deltaY + "px"; element.style.left = x + event.deltaX + "px"; });

hammer.on('panend',function(event){ });

}

var myElement = document.getElementById("move-box");

drag(myElement);

</script>

</body>

</html>

转载： http://blog.csdn.net/xiaozhuxmen/article/details/50837275

Hammer.js 实现移动端元素的拖拽库的更多相关文章

  1. js实现移动端悬浮图标拖拽

    /** * Created by Administrator on 2019/5/23. */ window.onload = function () { var oDiv = document.ge ...

  2. nw.js FrameLess Window下的窗口拖拽与窗口大小控制

    nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...

  3. Javascript实现鼠标框选元素后拖拽被框选的元素

    之前需要做一个框选元素后拖拽被框选中的元素功能,在网上找资料做了一些修改,基本达到了需要的效果,希望对也需要实现框选后拖拽元素功能的人有用. 页面加载后效果 框选后的内容可以拖拽,如下图: 代码下载

  4. 【Selenium-WebDriver问题篇】Selenium实现元素的拖拽（java版）（转）

    https://blog.csdn.net/u010503127/article/details/51381284 Selenium实现元素的拖拽(java版) [前言] 自从淘宝网登陆页出现滑块验证 ...

  5. 开源自己写的一个拖拽库，兼容到IE8+

    github地址:https://github.com/qiangzi7723/draggable 目前这个库的兼容做到了兼容IE8,所以如果需要兼容IE8的朋友不妨试试.库里面写了很多的注释,对于想 ...

  6. CSS之拖拽库2

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

  7. PC端的鼠标拖拽滑动

    1.滑块拖拽 html: <div id="div1"> js: <script> var oDiv=null; ; ; window.onload=fun ...

  8. 原生JS实现弹出窗口的拖拽

    上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...

  9. JavaScript实现网页元素的拖拽效果

    以下的页面中放了两个div,能够通过鼠标拖拽这两个元素到任何位置. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2ZydWVk/font/5a6 ...

随机推荐

  1. Aspose.Pdf v8.4.1 发布

    .NET v8.4.1: 修复的错误及漏洞: PDF到JPEG时,内容从最终JPEG文件中丢失. 书签缩放识别错误.  Java v4.2: 新特性: 搜索分离超过两行的文本. 修复的异常: PDF到 ...

  2. 上传通用化 VHD 并使用它在 Azure 中创建新 VM

    本主题逐步讲解如何使用 PowerShell 将通用化 VM 的 VHD 上传到 Azure.从该 VHD 创建映像,然后从该映像创建新 VM. 可以上传从本地虚拟化工具或其他云导出的 VHD. 对新 ...

  3. java笔记--匿名内部类和静态内部类的理解和使用

    匿名内部类 --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/3889467.html  "谢谢-- 1.由于局部内部类并不可见 ...

  4. js的一道经典题目

    今天碰到一道题,里面既包含了匿名函数的知识,也包含了预编译,函数的传参(形参),感觉迷迷糊糊的,所以想着做个总结. var foo={n:1}; (function(foo){ console.log ...

  5. c# 内存泄漏检查心得

    系统环境 windows 7 x64 检查工具:ANTS Memory Profiler 7 或者 .NET Memory Profiler 4.0 开发的软件为winform / windows s ...

  6. ZT --- extern "C"用法详解 2010-08-21 19:14:12

    extern "C"用法详解 2010-08-21 19:14:12 分类: C/C++ 1.前言: 时常在cpp的代码之中看到这样的代码: #ifdef __cplusplus ...

  7. [DP]硬币问题

    今天再写一下硬币问题 为什么是再呢 这是个很羞耻的话题 昨天写了一遍硬币 在某谷上跑 没错 挂掉了 TLE MD_SB ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  8. C++课堂作业(2)

    github的链接: https://github.com/deepYY/object-oriented/tree/master/PAT.1025 题目 给定一个常数K以及一个单链表L,请编写程序将L ...

  9. scala简介

    1.什么是Scala scala官方网址: http://www.scala-lang.org Scala是一种多范式的编程语言,其设计的初衷是要集成面向对象编程和函数式编程的各种特性.Scala运行 ...

  10. HTTP之Response状态码

    Status-Code - 1xx: Informational - Request received, continuing process - 2xx: Success - The action ...