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. netstat统计

    状态统计 netstat -ant | awk '/tcp/ {print $6}'|sort |uniq -c |sort -nr 前十位ESTABLISHED状态ip统计 netstat -ant ...

  2. 排查在 Azure 中新建 Windows VM 时遇到的部署问题

    尝试创建新的 Azure 虚拟机 (VM) 时,遇到的常见错误是预配失败或分配失败. 当由于准备步骤不当,或者在从门户捕获映像期间选择了错误的设置而导致 OS 映像无法加载时,将发生预配失败. 当群集 ...

  3. MySQL 8.0复制性能的提升（翻译）

    What’s New With MySQL Replication in MySQL 8.0 MySQL复制从问世到现在已经经历了多个年头,它的稳定性和可靠性也在稳步的提高.这是一个不停进化的过程,由 ...

  4. winform打包发布安装包详解..

    winform打包发布安装包详解..   使用VS 自带的打包工具,制作winform安装项目 开发环境:VS 2008 Access 操作系统:Windows XP 开发语言:C# 项目名称:**管 ...

  5. Asp.Net MVC Identity 2.2.1 使用技巧（五）

    创建用户管理相关视图 1.添加视图 打开UsersAdminController.cs   将鼠标移动到public ActionResult Index()上  右键>添加视图   系统会弹出 ...

  6. CentOS7.4 Keepalived+LVS 负载均衡 后台节点健康检查

    主机信息 VIP 10.10.10.55 LVS01 10.10.10.59 Web01 10.10.10.60 Web02 10.10.10.61 一.apache简单配置 1.(10.10.10. ...

  7. 深入浅出SharePoint——常用的系统账号

    NT AUTHORITY\Authenticated Users添加此用户后所有windows认证的ad用户都被授权.注意添加的时候如果搜索不到,可以直接输入Authenticated Users,然 ...

  8. OC内存管理-黄金法则

    1.内存管理-黄金法则 The basic rule to apply is everything that increases the reference counter with alloc, [ ...

  9. HttpClient简述

    HttpClient相比传统JDK自带的URLConnection,增加了易用性和灵活性,它不仅是客户端发送Http请求变得容易,而且也方便了开发人员测试接口(基于Http协议的),即提高了开发的效率 ...

  10. Programming Assignment 3: Baseball Elimination

    编程作业三 作业链接:Baseball Elimination & Checklist 我的代码:BaseballElimination.java 问题简介 这是一个最大流模型的实际应用问题: ...