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. Visual Studio Code 之 运行java代码

    1.安装扩展. 2.安装成功后,会在右键菜单中多出一个选项: 更改vscode“用户设置”文件:添加java.home(jdk目录)以及runcode显示在终端(解决中文乱码问题) code runn ...

  2. 【转】网络管理员必知之：IP地址划分

    1.IP地址分类         IP地址有四个段,包括网络标识和主机标识两部分:netid+hostid.         IP地址应用分为A.B.C三类,D.E类是保留和专用的.         ...

  3. Redis 在Golang中使用遇到的坑

    1.从lua脚本传回到go那边的数字是string类型 2.hincrby 返回当前值的计算结果(即存放到redis中的值) 3.hset 一个不存在的key,返回什么呢?即设置失败返回什么错误?(会 ...

  4. Python实例---抽屉热搜榜前端代码分析

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. SQL查询含有%号的字段

    select * from EMS_ANNOUNCEMENT where 1=1  and title like '%\%%'  escape '\'

  6. 微信小程序及各种平台对接常用可逆加密算法aes256

    不同程序之间经常会交换数据,我们经常采用的套路是: 假设要传输的信息是json,我们假设其为json_data,通过http传递信息为 json_data_encode=json_data&s ...

  7. Burp Suite使用介绍总结

    Burp Suite使用介绍(一) 小乐天 · 2014/05/01 19:54 Getting Started Burp Suite 是用于攻击web 应用程序的集成平台.它包含了许多工具,并为这些 ...

  8. MD5随机盐值生成法

    public class Test3 { /** * 生成含有随机盐的密码 */ public static String generate(String password) { Random r = ...

  9. （转）Win10下PostgreSQL10与PostGIS安装

    版权声明:本文为博主原创文章,欢迎转载. https://blog.csdn.net/LWJ285149763/article/details/79380643 最近在使用矢量数据,因此需要用空间数据 ...

  10. python ,__set__, __get__ 等解释

    @python __set__ __get__ 等解释 如果你和我一样,曾经对method和function以及对它们的各种访问方式包括self参数的隐含传递迷惑不解,建议你耐心的看下去.这里还提到了 ...