Hammer.js 移动端手势库，多点触控插件

最新推荐文章于 2024-05-26 09:46:22 发布
最新推荐文章于 2024-05-26 09:46:22 发布
阅读量294 收藏
点赞数
文章标签： javascript ViewUI

 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 = 0;
            var y = 0;
            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://hammerjs.github.io/

 

在线调试：

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 == 1) {
            var touch = event.targetTouches[0];  // 把元素放在手指所在的位置
            div.style.left = touch.pageX + 'px';
            div.style.top = touch.pageY + 'px';
            div.style.background = "green";
        }
    }, false);
</script>
View Code

 

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 = 0; i < $this.length; i++) {
                $this[i].addEventListener('touchstart', function (event) {
                    timeout = setTimeout(fn, 500);
                }, 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>
View Code

 

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:10;
            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 = 0;

        var $this = this;
        for (var i = 0; i < $this.length; i++) {
            $this[i].addEventListener('touchstart', function (event) {

                clearTimeout(timeout);
                state = 0;
                timeout = setTimeout(function () {
                    state = 1;
                }, 1000);

            }, false);

            $this[i].addEventListener('touchmove', function (event) {

                if (state == 1) {
                    console.log("move");
                }

            }, false);

            $this[i].addEventListener('touchend', function (event) {

                clearTimeout(timeout);

                if (state == 1) {
                    console.log("end");
                    state = 0;
                }


            }, false);

        }

    };

    //阻止浏览器 复制粘贴等事件
    window.ontouchstart = function (e) {
        e.preventDefault();
    };

    //触发事件
    $(".mydiv").longPress(function () {

        console.log("long");

    });


</script>
</body>
</html>
View Code

 

 

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: 0; padding: 0; -moz-user-select:none;}
        ul{ margin: 100px; border: 1px solid #adff2f; list-style: none;}
        li{ height: 30px; line-height: 30px; padding: 0; 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 = '0';
    div.style.background = 'red';

    var outer_wrap = $('outer_wrap');
    outer_wrap.onmousedown = function(event){
//获取列表顺序
        var lis = outer_wrap.getElementsByTagName('li');
        for(var i = 0; 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 = 0; 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']/2){
                        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']/2 && 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>
View Code

 

jQuery  拖拽交换位置（电脑端）

<!doctype html>
<html>
<head>
    <meta charset='utf-8' />
    <meta name="viewport"
          content="
        width = device-width ,
  height = device-height ,
        initial-scale = 1,
        minimum-scale = 1,
        maximum-scale = 1,
        user-scalable =no,

  "
    />
    <title></title>

    <style>
        * { padding:0;margin:0;list-style: none }
        html,body { height:100%; overflow:hidden; }
        ul { margin:50px auto;position:relative; width:1100px; height:500px;}
        ul li { float:left; width:25%; cursor:pointer; padding:10px; box-sizing:border-box; height:33%}
        ul img { height:100%;width:100%; box-shadow:0 3px 4px rgba(102,102,102,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=11; i>=0; i--){
            var oLi = $('li').eq(i),
                    gLi = oLi.get(0);

            oLi.css({'left':gLi.offsetLeft+'px','top':gLi.offsetTop+'px','position':'absolute','margin':0});
            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 = 0;

        $(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':1});
            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=0;i<12;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-1; j>=he_index; j--){
                                test(1,j);
                            }
                        }else{
                            for(var j=i_index+1; j<he_index+1; j++){
                                test(-1,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<0||parent_X>parent.offsetWidth||parent_Y<0||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':1,'zIndex':0})
                });
                delete document.index;
                delete document.flag;

            });
        });


    })
</script>


<ul>
    <li index="0"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="1"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="2"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="3"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="4"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="5"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="6"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="7"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="8"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="9"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="10"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="11"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>

</ul>
</body>
</html>
View Code

 

 

 

拖放移动位置如：(移动端拖拽的实现效果)

http://blog.csdn.net/xyphf/article/details/51988947

 

移动端 javascript 实现长按拖动

https://segmentfault.com/q/1010000008667545

 

。

weixin_33696106
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
多点触控插件Hammer.js
08-27
Hammer.js是一个开源的，轻量级的javascript库，它可以在不需要依赖其他东西的情况下识别触摸，鼠标事件。浏览器要求ie10以上版本,演示地址：http://www.jq22.com/jquery-info552
hammer.js 一个多点触摸手势库
TivonaLH的博客
08-12 1979
hammer.js是一款开源的移动端脚本框架，他可以完美的实现在移端开发的大多数事件，如：点击、滑动、拖动、多点触控等事件。不需要依赖任何其他的框架，并且整个框架非常小，在使用时非常简单。
推荐开源项目：Vue-Hammer - 移动端手势操作的Vue封装库
最新发布
gitblog_00024的博客
05-26 275
推荐开源项目：Vue-Hammer - 移动端手势操作的Vue封装库 项目地址:https://gitcode.com/bsdfzzzy/vue2-hammer 在移动开发领域，为了提供丰富且直观的用户体验，手势操作变得越来越重要。今天我们要向您推荐一款强大的Vue插件——Vue-Hammer，它是一个基于Hammer.js的手势识别库的Vue指令包装器，能帮助您轻松地实现各种手势交互。 项目介绍...
hammer.js – 多点触摸手势库
YIYIYU77的专栏
08-13 323
hammer.js 是一个多点触摸手势库，能够为网页加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多点触摸事件，免去自己监听底层touchstart、touchmove、touchend事件并且写一大堆判断逻辑的痛苦。
移动端手势插件
06-16
jGestures是一个jq移动端手势插件，jGestures插件允许你如同原生的jQuery事件一样监听以下事件
列一个手机端可以实现手势滑动的插件或类库（移动端触摸滑动插件）
LuckXinXin的博客
12-02 436
A、zepto库 B、jquery UI C、swiper.js（官网地址），具有开源、免费、功能强大的特点，是目前应用较广泛的移动端网页触摸内容滑动js插件 D、TouchSlide(官网地址)，TouchSlide 是纯javascript打造的触屏滑动特效插件，面向手机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。也是大话主席 superslide旗下的一款...
Hammer.js移动端手势库实例
09-26
里面包括很多事例，可以实现div,img的缩放，旋转，滑动 还有在指定区域内滑动不能覆盖其他区域，还有很多其他实例自己挖掘，http://www.cnblogs.com/vajoy/p/4011723.html一份官方翻译说明，附有操作说明书。
hammer.js之上的多点触控手势糖层_JavaScript_下载.zip
05-01
Hammer.js 是一个轻量级的JavaScript库，专为触摸设备设计，用于处理各种手势操作，如滑动、旋转、缩放等。它为开发者提供了一种简单的方式来添加多点触控功能到他们的Web应用或网站中，使得触摸交互更加直观和用户...
hammer.js移动端图片手指缩放插件
07-22
`hammer.js` 是核心库，包含了基本的手势识别功能，而 `hammerPlugin.js` 可能是为特定功能（如图片缩放）扩展的插件。将这两个文件引入到HTML文件中，就可以开始使用Hammer.js了。 2. **图片手指缩放原理**： ...
knockout-hammer:敲除 Hammer.js 多点触控手势库的自定义绑定
06-15
击倒锤敲除 Hammer.js 多点触控手势库的自定义绑定敲除（ ）hammer.js（ ） 用法：数据绑定=“hmHold：holdHandlerFn，hmOptions：{hold_timeout：400}” 去做： ？？ 使用 jQueryhammer.js 插件来支持 IE 待办事项...
hammer移动端手势插件
04-18
使用该插件在移动端实现长按、单击、双击效果，不用自己再封装实现该效果。
hammer.js对svg平移，缩放demo
12-11
使用轻量级hammer.js对svg平移，缩放处理的demo,只是一些简单的处理
Hammerjs实现多点触摸手势的javascript库
08-09
Hammer.js：实现多点触摸手势的javascript库
vue2-hammer Vue 2.x的Hammer.js包装器，支持移动触摸。-Vue.js开发
05-27
vue-hammer Vue的Hammer.js包装器支持移动设备中的某些操作这是Hammer.js 2.x的指令包装器。 Vue-hammer的Hammer.js包装器为Vue提供了支持，以支持移动设备中的某些操作。这是Hammer.js 2.x的指令包装器。 而这种回购的灵感来自于v-touch。 如果要为Angular4 +查找相同的包装器，可以查看ngx-hammer安装。此插件支持Vue> = 2.0。 npm通过npm作为vue2-hammer可用。 npm从“ vue2-hammer”安装vue2-hammer import {VueHammer} Vue.use（VueHammer）用法使用v-hammer指令点击m
手机js手势放大缩放图片插件
01-20
移动web APP的手势放大缩放图片插件
javascript手势操作插件 base-gesture.js
aboutcjp的博客
06-16 1360
有人说，学习是一个重复造轮子的过程，so....。我也造了个轮子玩哟。 学习js有段时间了，一直想做点小东西之类的。之前有做过jquery插件之类的。。不过呢，还是想试用下原生js(感觉屌=一点。哈哈哈哈)。现在移动端不是很火嘛（跟风狗。。。。）于是就写了写js的手势操作的实现。当然现在有许多手势插件了，非常优秀。例如hammer.js。但是总有自己造个轮子的执念嘛~~~ 下面，就说说我自己造
用 JavaScript 实现手势库 — 封装手势库【前端组件化】
三钻 - 之前端到全栈之路
06-21 2624
经历了多次的迭代，我们的手势库功能都已经实现了。但是到了这里我们的代码确实需要重新整理和封装了。如果同学们还记得的，我们之间一开始获取的元素 `element` 是写死的。但是作为一个手势库，我们绑定的元素必然是由这个库的使用者而决定的。
手机 html5 hammer drag widget,HTML5拖放在DIV与Hammer.js拖动事件
weixin_42384735的博客
07-02 89
Hammer.js事件只能在先前被绑定的情况下捕获。尝试使用case语句...(这是来自我最近构建的应用程序)我可以将语句分解出来或返回false等来防止出现问题。但理论上讲，如果我解开或排除事件“拖曳”，它应该无论如何工作。var hammertime = Hammer(document.getElementById('image-wrapper'), {transform_always_blo...
hammer.js 手势缩放pdf.js
04-04
Hammer.js是一个用于处理触摸手势的JavaScript库，它提供了丰富的手势事件和手势识别功能。而pdf.js是Mozilla开发的一个用于在Web上显示PDF文件的JavaScript库。 要在使用Hammer.js实现手势缩放pdf.js的功能，你...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值