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. Android图片处理--缩放

    PS:在开发中我们会遇到一些图片处理问题,比如说缓存图片了.限制图片大小了.查看图片了等.上一篇文章介绍了图片的全景效果查看,今天介绍一个图片缩放,我们如果有时间的话,可以自己写一个属于自己的库,里面 ...

  2. 【Oracle】DBMS_STATS.GATHER_TABLE_STATS详解

    由于Oracle的优化器是CBO,所以对象的统计数据对执行计划的生成至关重要!    作用:DBMS_STATS.GATHER_TABLE_STATS统计表,列,索引的统计信息(默认参数下是对表进行直 ...

  3. DAO,SERVICE

  4. 实现UIView的无限旋转动画（非CALayer动画）

    实现UIView的无限旋转动画(非CALayer动画) 效果: 素材: 源码: // // ViewController.m // Animation // // Created by YouXian ...

  5. Linux 基础学习大考核

    0.关于Linux的简介 Linux(好又免费)的组成部分: Linux 是一种计算机操作系统: 一系列能让您与计算机进行交互操作并运行其它程序的程序. 操作系统由多种基础程序构成.它们使计算机可以与 ...

  6. 沉淀再出发:Spring的架构理解

    沉淀再出发:Spring的架构理解 一.前言 在Spring之前使用的EJB框架太庞大和重量级了,开发成本很高,由此spring应运而生.关于Spring,学过java的人基本上都会慢慢接触到,并且在 ...

  7. 4星|《助推（实践版）》：英国政府用AB测试检验政策效果的经验

    助推:小行动如何推动大变革(实践版)(诺贝尔经济学奖得主理查德•塞勒的助推实践) 作者作为学者说服英国政府实施助推策略的经过,提到一些具体主推策略. 所谓的助推,很像IT业流行的AB测试,对政策的执行 ...

  8. php独特的语法

    今天写一个程序的时候遇到一个很有意思的问题,这个和php独特的语法有关,首先我们看一下代码是怎么写的. <?php $db = mysql_connect('localhost','root', ...

  9. API接口数据自检

    这个周末的娱乐,通用模块,让后端自检,严格客户端按照文档的要求来,妈妈再也不担心我加班了,对某些团队来说,可能根本用不着,本是想到就尝试一把而已. 哎,傻X的客户端程序员,时间都去推辞扯淡打扮啦,好好 ...

  10. 安卓原生与hml交互（WebView基础）

    WebView加载页面 webView有两种加载方式, 加载网络地址 webView.loadUrl("www.xxx.com/index.html"); 加载本地资源 webVi ...