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. mvn install 时候报GBK编码错误解决办法

    在pom.xml里面 <properties> <!-- 文件拷贝时的编码 --> <project.build.sourceEncoding>UTF-</p ...

  2. bootstrap-table sum总数量统计

    写了一个分页要显示数据中所有金额的总数  但是使用 footerformatter  却不知道该怎么赋值   没办法只能放到页脚了 先上个效果图: 这样做要修改源码: bootstrap-table. ...

  3. IT之路如何走得更远

    作者:石头2075链接:http://www.jianshu.com/p/8c6417e16505著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 首先,你需要在合适的年纪进入了这 ...

  4. maven(16)-灵活的环境构建

     多个环境 一个项目,在家的时候可能会在本机上运行,在公司可能在内网测试环境运行,上线后会在生产环境运行,在不同的环境中会有一些配置是不一样的,至少数据库就不一样.如果每换一个环境就去改所有配置太 ...

  5. google学习

    https://developers.google.com/machine-learning/crash-course/ https://developers.google.com/machine-l ...

  6. byr面经两则

    人人,金山西山居,腾讯互娱,微信,网易游戏offer及面经 首先感谢师兄在两年前发的贴([天道酬勤] 腾讯.百度.网易游戏.华为Offer及笔经面经 ),这篇文章对我帮助很大. 我写这篇文章一是为了感 ...

  7. Python 爬虫练手项目—酒店信息爬取

    from bs4 import BeautifulSoup import requests import time import re url = 'http://search.qyer.com/ho ...

  8. rabbitmq集群几个比较好的文章

    以下几个链接可作为搭建rabbitmq集群是的参考,个人觉得写的很详细很好 1.RabbitMQ 高可用集群搭建及电商平台使用经验总结 http://www.cnblogs.com/wangiqngp ...

  9. Python学习---函数的学习1209[all]

    1.基础函数 2.高阶函数 3.递归函数 4.内置函数 5.匿名函数和闭包

  10. 【MySQL】MySQL数据库再安装

    解决问题 安装时提示此产品配置信息损坏,怎么办? 环境检测时未响应,怎么办? 服务不能启动,怎么办? 输入密码不能登陆,不使用密码却能登录,是什么原因? 涉及到的错误代码:windows启动MySQL ...