Hammer.js 移动端手势库，多点触控插件
jquery用法：
引入3个JS:
<script src="jquery.js"></script>
<script src="hammer.js"></script>
<script src="jquery.hammer.js"></script>
$(".myElement").hammer().bind("tap", function(ev) {
$(this).addClass("red");
console.log(ev);
}).bind("press", function(ev) {
$(this).removeClass("red");
console.log("press");
});
//下面写在一起
拖动：
<div id="myElement" style="position:fixed;"> </div>
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 = ;
var y = ;
hammer.on('panstart',function(event){
console.log("panstart");
x = parseInt(element.style.left);
y = parseInt(element.style.top);
});
hammer.on('panmove',function(event){
console.log("panmove");
element.style.top = y + event.deltaY + "px";
element.style.left = x + event.deltaX + "px";
});
hammer.on('panend',function(event){
console.log("panend");
});
}
var myElement = document.getElementById("move-box");
drag(myElement);
一般用法：
<script src="hammer.js"></script>
var myElement = document.getElementById('myElement');
var mc = new Hammer(myElement);
mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
mc.on("panleft panright panup pandown tap press", function(ev) {
if(ev.type == "press"){
obj.addClass("red")
}else {
obj.removeClass("red");
}
});
官网：
在线调试：
http://codepen.io/jtangelder/pen/lgELw
网上：
http://www.tuicool.com/articles/VNRjym7
http://blog.csdn.net/kongjiea/article/details/43016085
----------------- 原生JS:
JS拖拽移动位置（手机端）
<div id="div" style="width:100px;height:100px;background-color:red;position:absolute;"></div>
<script>
var div = document.getElementById('div');
div.addEventListener('touchmove', function(event) {
event.preventDefault();//阻止其他事件
// 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == ) {
var touch = event.targetTouches[]; // 把元素放在手指所在的位置
div.style.left = touch.pageX + 'px';
div.style.top = touch.pageY + 'px';
div.style.background = "green";
}
}, false);
</script>
JQUERY手机长按触发事件（手机端）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" Content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
<title>fdsa</title>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
</head>
<body>
<div id="div" style="width:100px;height:100px;background:#ddd;position:absolute;"></div>
<script>
//长按事件
$.fn.longPress = function (fn) {
var timeout = undefined;
var $this = this;
for (var i = ; i < $this.length; i++) {
$this[i].addEventListener('touchstart', function (event) {
timeout = setTimeout(fn, );
}, false);
$this[i].addEventListener('touchend', function (event) {
clearTimeout(timeout);
}, false);
}
}; //阻止浏览器 复制粘贴等事件
window.ontouchstart = function (e) { e.preventDefault(); }; //触发事件
$("#div").longPress(function () {
console.log("long");
alert("Ok");
});
</script>
</body>
</html>
JQUERY手机长按并移动触发事件（手机端）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" Content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
<title>长按并移动</title>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<style>
.mydiv{
position:absolute;
left:10px;
top:10px;
background-color:gray;
width:100px;
height:80px;
z-index:;
display:block;
}
</style>
</head> <body> <div class="mydiv">out</div>
<div class="mydiv" style="top:200px;">out</div> <script>
$.fn.longPress = function (fn) { /*设置一个长按的计时器，如果点击这个图层超过2秒则触发，mydiv里面的文字从out变in的动作*/
var timeout = undefined;
var state = ; var $this = this;
for (var i = ; i < $this.length; i++) {
$this[i].addEventListener('touchstart', function (event) { clearTimeout(timeout);
state = ;
timeout = setTimeout(function () {
state = ;
}, ); }, false); $this[i].addEventListener('touchmove', function (event) { if (state == ) {
console.log("move");
} }, false); $this[i].addEventListener('touchend', function (event) { clearTimeout(timeout); if (state == ) {
console.log("end");
state = ;
} }, false); } }; //阻止浏览器 复制粘贴等事件
window.ontouchstart = function (e) {
e.preventDefault();
}; //触发事件
$(".mydiv").longPress(function () { console.log("long"); }); </script>
</body>
</html>
JS拖拽交换位置（电脑端）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>孚盟CRM</title>
<meta name="viewport" Content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"> <title></title>
<style type="text/css">
*{ margin: ; padding: ; -moz-user-select:none;}
ul{ margin: 100px; border: 1px solid #adff2f; list-style: none;}
li{ height: 30px; line-height: 30px; padding: ; list-style: none;}
li:hover{ background: #bdb76b; cursor: move;}
</style>
</head>
<body> <ul id="outer_wrap">
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
<li>第四条</li>
<li>第五条</li>
<li>第六条</li>
<li>第七条</li>
<li>第八条</li>
</ul> <script type="text/javascript">
function $(id){
return document.getElementById(id);
}
//获取鼠标位置
function getMousePos(e){
return {
x : e.pageX || e.clientX + document.body.scrollLeft,
y : e.pageY || e.clientY + document.body.scrollTop
}
}
//获取元素位置
function getElementPos(el){
return {
x : el.offsetParent ? el.offsetLeft + arguments.callee(el.offsetParent)['x'] : el.offsetLeft,
y : el.offsetParent ? el.offsetTop + arguments.callee(el.offsetParent)['y'] : el.offsetTop
}
}
//获取元素尺寸
function getElementSize(el){
return {
width : el.offsetWidth,
height : el.offsetHeight
}
}
//禁止选择
document.onselectstart = function(){
return false;
}
//判断是否有挪动
var MOVE = {};
MOVE.isMove = false; //就是创建的标杆
var div = document.createElement('div');
div.style.width = '400px';
div.style.height = '1px';
div.style.fontSize = '';
div.style.background = 'red'; var outer_wrap = $('outer_wrap');
outer_wrap.onmousedown = function(event){
//获取列表顺序
var lis = outer_wrap.getElementsByTagName('li');
for(var i = ; i < lis.length; i++){
lis[i]['pos'] = getElementPos(lis[i]);
lis[i]['size'] = getElementSize(lis[i]);
}
event = event || window.event;
var t = event.target || event.srcElement;
if(t.tagName.toLowerCase() == 'li'){
var p = getMousePos(event);
var el = t.cloneNode(true);
el.style.position = 'absolute';
el.style.left = t.pos.x + 'px';
el.style.top = t.pos.y + 'px';
el.style.width = t.size.width + 'px';
el.style.height = t.size.height + 'px';
el.style.border = '1px solid #d4d4d4';
el.style.background = '#d4d4d4';
el.style.opacity = '0.7';
document.body.appendChild(el); document.onmousemove = function(event){
event = event || window.event;
var current = getMousePos(event);
el.style.left =t.pos.x + current.x - p.x + 'px';
el.style.top =t.pos.y + current.y - p.y+ 'px';
document.body.style.cursor = 'move'; //判断插入点
for(var i = ; i < lis.length; i++){
if(current.x > lis[i]['pos']['x'] && current.x < lis[i]['pos']['x'] + lis[i]['size']['width'] && current.y > lis[i]['pos']['y'] && current.y < lis[i]['pos']['y'] + lis[i]['size']['height']/){
if(t != lis[i]){
MOVE.isMove = true;
outer_wrap.insertBefore(div,lis[i]);
} }else if(current.x > lis[i]['pos']['x'] && current.x < lis[i]['pos']['x'] + lis[i]['size']['width'] && current.y > lis[i]['pos']['y'] + lis[i]['size']['height']/ && current.y < lis[i]['pos']['y'] + lis[i]['size']['height']){
if(t != lis[i]){
MOVE.isMove = true;
outer_wrap.insertBefore(div,lis[i].nextSibling);
}
}
}
}
//移除事件
document.onmouseup = function(event){
event = event || window.event;
document.onmousemove = null;
if(MOVE.isMove){
outer_wrap.replaceChild(t,div);
MOVE.isMove = false;
}
document.body.removeChild(el);
el = null;
document.body.style.cursor = 'normal';
document.onmouseup = null;
}
}
}
</script>
</body>
</html>
jQuery 拖拽交换位置（电脑端）
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport"
content="
width = device-width ,
height = device-height ,
initial-scale = ,
minimum-scale = ,
maximum-scale = ,
user-scalable =no, "
/>
<title></title> <style>
* { padding:;margin:;list-style: none }
html,body { height:%; overflow:hidden; }
ul { margin:50px auto;position:relative; width:1100px; height:500px;}
ul li { float:left; width:%; cursor:pointer; padding:10px; box-sizing:border-box; height:%}
ul img { height:%;width:%; box-shadow: 3px 4px rgba(,,,0.5) }
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
</head>
<body> <script>
$(function(){ var ps={L:[],R:[],T:[],B:[]};
for(var i=; i>=; i--){
var oLi = $('li').eq(i),
gLi = oLi.get(); oLi.css({'left':gLi.offsetLeft+'px','top':gLi.offsetTop+'px','position':'absolute','margin':});
ps.L.push(gLi.offsetLeft);
ps.T.push(gLi.offsetTop);
ps.R.push(gLi.offsetLeft + gLi.offsetWidth);
ps.B.push(gLi.offsetTop + gLi.offsetHeight);
};
ps.L = ps.L.reverse();
ps.R = ps.R.reverse();
ps.T = ps.T.reverse();
ps.B = ps.B.reverse(); //储存位置 //初始化
var b = ; $(document).on('mousedown','li',function(e){
e.preventDefault();
var _this = this;
if(_this.setCapture){_this.setCapture()};
var X = e.clientX - _this.offsetLeft,
Y = e.clientY - _this.offsetTop,
oList = $('li'),
attr = [];
my_index = $( _this ).attr('index'); //初始保存一个原来的Index,回到原来的数组(位置)
$(_this).css({'opacity':0.9,'zIndex':});
document.index = my_index; //目的是为了脱离变量作用域 $('li').each(function() {
attr.push( $(this).attr('index') )
}); $(document).on('mousemove',function(e){
var lt = e.clientX - X,
tp = e.clientY - Y,
screen_l = e.clientX - _this.parentNode.offsetLeft,
screen_t = e.clientY - _this.parentNode.offsetTop;
$(_this).css({'left':lt+'px','top':tp+'px'}); for(var i=;i<;i++){ var he_index = parseInt(oList.eq(i).attr('index'));
if(screen_l>ps.L[he_index]&&screen_l<ps.R[he_index]&&screen_t>ps.T[he_index]&&screen_t<ps.B[he_index]){
var i_index = parseInt($(_this).attr('index'));
if(he_index == i_index)continue;
document.index = he_index; //当找到元素保存要抵达的位置的index
document.flag = false;
var test = function (num,j){
var he_Li = $('li[index='+j+']');
$(he_Li).stop();
he_Li.animate({
left:ps.L[j+num],
top:ps.T[j+num]
},'fast');
he_Li.attr('index',j+num);
};
//利用属性选择器找到对应index(也就是找到数组相应位置)的元素;并且变换属性index到相应的数组索引； if(i_index>he_index){
for(var j=i_index-; j>=he_index; j--){
test(,j);
}
}else{
for(var j=i_index+; j<he_index+; j++){
test(-,j);
}
};
$(_this).attr('index',he_index); //变换_this的index
document.flag = true; }else{
if(document.flag){
var parent = _this.parentNode,
parent_X = e.clientX - parent.offsetLeft,
parent_Y = e.clientY - parent.offsetTop;
if( parent_X<||parent_X>parent.offsetWidth||parent_Y<||parent_Y>parent.offsetHeight ){
oList.not(_this).each(function(index, element) {
var a = $(element).index();
$(element).animate({
left:ps.L[attr[a]],
top:ps.T[attr[a]]
},'fast').attr('index',attr[a])
});
document.index = my_index;
$(_this).attr('index',my_index);
document.flag = false;
//当移出父节点还原
} }
}; };
});
$(document).on('mouseup',function(){
if(_this.releaseCapture){
_this.releaseCapture();
};
$(this).off('mousemove');
$(this).off('mouseup'); $(_this).animate({
left:ps.L[document.index],
top:ps.T[document.index]
},'fast',function(){
$(_this).css({'opacity':,'zIndex':})
});
delete document.index;
delete document.flag; });
}); })
</script> <ul>
<li index=""><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
<li index=""><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
<li index=""><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
<li index=""><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
<li index=""><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
<li index=""><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
<li index=""><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
<li index=""><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
<li index=""><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
<li index=""><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
<li index=""><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
<li index=""><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li> </ul>
</body>
</html>
拖放移动位置如：(移动端拖拽的实现效果)
http://blog.csdn.net/xyphf/article/details/51988947
移动端 javascript 实现长按拖动
https://segmentfault.com/q/1010000008667545
。
Hammer.js 移动端手势库，多点触控插件的更多相关文章
- hammer.js移动端手势库
hammer.js 是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove ...
- 与众不同 windows phone (25) - Input（输入）之捕获 UIElement 之外的触控操作, Silverlight 方式捕获手势操作, XNA 方式捕获手势操作, 多点触控
原文:与众不同 windows phone (25) - Input(输入)之捕获 UIElement 之外的触控操作, Silverlight 方式捕获手势操作, XNA 方式捕获手势操作, 多点触 ...
- 多点触控插件Hammer.js
插件描述:Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件. 使用方法: <script src=<span class ...
- Hammer.js移动端触屏框架的使用
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...
- Android 多点触控与简单手势（一）
现在一般的Android手机都会使用电容触摸屏最少可以支持两点触摸,多的可能是七八个,所以基本上都会支持多点触控, android系统中应用程序可以使用多点触控的事件来完成各种手势和场景需求. And ...
- Android多点触控手势基础
处理多点触控手势 多点触控就是同时把一根以上的手指放在屏幕上. 再继续往下以前需要补充一些名词: 触控手势:就是把一根或者几根手指放在屏幕上做各种动作,其中包括保留一根手指的前提下,拿起或者放下其余的 ...
- 在 Mac 上使用多点触控手势
使用多点触控触控板或妙控鼠标,可以通过轻点.轻扫.捏合或开合一根或多根手指进行有用的操作. 触控板手势 有关这些手势的更多信息,请选取苹果菜单 () >“系统偏好设置”,然后点按“触控板”.您 ...
- windows8 开发教程 教你制作 多点触控Helper可将任意容器内任意对象进行多点缩放
http://blog.csdn.net/wangrenzhu2011/article/details/7732907 (转) 实现方法: 对Manipulation进行抽象化 使不同容器可共用多点缩 ...
- Android 多点触控错误处理（java.lang.IllegalArgumentException: pointerIndex out of range）
最近做View的多点触控时,每次第一次触控事件完美运行,第二次就直接崩了,错误信息如下: 01-03 00:05:44.220 4377-4410/system_process E/AndroidRu ...
随机推荐
- hdu 4685(强连通分量+二分图)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4685 题意:n个王子和m个公主,王子只能和他喜欢的公主结婚,公主可以和所有的王子结婚,输出所有王子可能 ...
- 玩弄 python 正则表达式
这里记录一个我常用的模型,每次久了不使用正则就会忘记. 记得最好玩的一句关于正则表达式的话就是 当你想到一件事情可以用正则表达式解决的时候 现在你就面临了两个问题了. python里面使用了re模块对 ...
- (转)vmware下给linux虚拟机扩容
“Well, here’s another fine mess you’ve gotten me into” Let us pretend that you have an Ubuntu Server ...
- 【Java】初始化
默认域初始化 如果在构造器中没有显示地给域赋予初值,那么就会被自动赋予默认值:数值为0,布尔值为false,对象引用为null. 无参数构造器 很多类都包含一个无参数的构造函数,对象由无参数构造函数创 ...
- python之tkinter使用-二级菜单
# 菜单功能说明:二级菜单 import tkinter as tk from tkinter import messagebox root = tk.Tk() root.title('菜单选择') ...
- 学习记录特别篇之sql，类的继承
思路: 应用场景: 1.将父类当做一个基础类 大家都去继承该方法,以便少些代码 2.继承父类的方法 同时可以重写该方法时候调用父类原先的方法 实现一石二鸟的效果 即 既增加原先的功能 又新增新的功能 ...
- 改变自己从学习linux开始
刚刚高中毕业,进如大学的时候,总以为摆脱了束缚可以无拘无束的玩耍了.当时真的就是和众多大学生一起,像撒欢的野马,每天逃课,上网,泡吧,不把学习当一会事,学校里教授讲的各种知识也没有听在心里,前两年玩的 ...
- Scout YYF I POJ - 3744(概率dp + 矩阵快速幂)
题意: 一条路上有n个地雷,你从1开始走,单位时间内有p的概率走一步,1-p的概率走两步,问安全通过这条路的概率 解析: 很容易想到 dp[i] = p * dp[i-1] + (1 - p) * d ...
- hdu 1074 (状压dp)
题意: 给出几个学科的作业.每个作业剩余的时间.完成每个学科作业的时间.如果在剩余时间内不能完成相应作业 就要扣分 延迟一天扣一分 求最小扣分 解析: 把这些作业进行全排列 求出最小扣分即可 但A( ...
- MT【47】求一道分式的最值
评:技巧性很大,需要敏锐的洞察力通过柯西不等式把分母变成一样.请记住这个变形$$(a+b+ab+1)=(a+1)(b+1)\le\sqrt{(a^2+1)(b^2+1)}$$