Hammer.js 实现移动端元素的拖拽库
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 实现移动端元素的拖拽库的更多相关文章
- js实现移动端悬浮图标拖拽
/** * Created by Administrator on 2019/5/23. */ window.onload = function () { var oDiv = document.ge ...
- nw.js FrameLess Window下的窗口拖拽与窗口大小控制
nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...
- Javascript实现鼠标框选元素后拖拽被框选的元素
之前需要做一个框选元素后拖拽被框选中的元素功能,在网上找资料做了一些修改,基本达到了需要的效果,希望对也需要实现框选后拖拽元素功能的人有用. 页面加载后效果 框选后的内容可以拖拽,如下图: 代码下载
- 【Selenium-WebDriver问题篇】Selenium实现元素的拖拽(java版)(转)
https://blog.csdn.net/u010503127/article/details/51381284 Selenium实现元素的拖拽(java版) [前言] 自从淘宝网登陆页出现滑块验证 ...
- 开源自己写的一个拖拽库,兼容到IE8+
github地址:https://github.com/qiangzi7723/draggable 目前这个库的兼容做到了兼容IE8,所以如果需要兼容IE8的朋友不妨试试.库里面写了很多的注释,对于想 ...
- CSS之拖拽库2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- PC端的鼠标拖拽滑动
1.滑块拖拽 html: <div id="div1"> js: <script> var oDiv=null; ; ; window.onload=fun ...
- 原生JS实现弹出窗口的拖拽
上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...
- JavaScript实现网页元素的拖拽效果
以下的页面中放了两个div,能够通过鼠标拖拽这两个元素到任何位置. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2ZydWVk/font/5a6 ...
随机推荐
- Aspose.Pdf v8.4.1 发布
.NET v8.4.1: 修复的错误及漏洞: PDF到JPEG时,内容从最终JPEG文件中丢失. 书签缩放识别错误. Java v4.2: 新特性: 搜索分离超过两行的文本. 修复的异常: PDF到 ...
- 上传通用化 VHD 并使用它在 Azure 中创建新 VM
本主题逐步讲解如何使用 PowerShell 将通用化 VM 的 VHD 上传到 Azure.从该 VHD 创建映像,然后从该映像创建新 VM. 可以上传从本地虚拟化工具或其他云导出的 VHD. 对新 ...
- java笔记--匿名内部类和静态内部类的理解和使用
匿名内部类 --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/3889467.html "谢谢-- 1.由于局部内部类并不可见 ...
- js的一道经典题目
今天碰到一道题,里面既包含了匿名函数的知识,也包含了预编译,函数的传参(形参),感觉迷迷糊糊的,所以想着做个总结. var foo={n:1}; (function(foo){ console.log ...
- c# 内存泄漏检查心得
系统环境 windows 7 x64 检查工具:ANTS Memory Profiler 7 或者 .NET Memory Profiler 4.0 开发的软件为winform / windows s ...
- ZT --- extern "C"用法详解 2010-08-21 19:14:12
extern "C"用法详解 2010-08-21 19:14:12 分类: C/C++ 1.前言: 时常在cpp的代码之中看到这样的代码: #ifdef __cplusplus ...
- [DP]硬币问题
今天再写一下硬币问题 为什么是再呢 这是个很羞耻的话题 昨天写了一遍硬币 在某谷上跑 没错 挂掉了 TLE MD_SB ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- C++课堂作业(2)
github的链接: https://github.com/deepYY/object-oriented/tree/master/PAT.1025 题目 给定一个常数K以及一个单链表L,请编写程序将L ...
- scala简介
1.什么是Scala scala官方网址: http://www.scala-lang.org Scala是一种多范式的编程语言,其设计的初衷是要集成面向对象编程和函数式编程的各种特性.Scala运行 ...
- HTTP之Response状态码
Status-Code - 1xx: Informational - Request received, continuing process - 2xx: Success - The action ...