web-dev-qa-db-ja.com

ハンマーを使用してスワイプする方法

興味深いリソース、Hammer.jsを見つけました。 HammerとjQueryでスワイプしようとしました。

1）コードをダウンロードしました here
2）そのコードをドキュメントに入れました。スワイプを使用するドキュメントのヘッドにそのコードへのリンクを配置します：<script src="hammer.js"></script>
3）使用方法がわかりません。 jQueryでこれに似たようなことをしようとしています。クリックする代わりにスワイプしたいということです：

$(function(){
    $(".blue").click(function() {
        $(".blue").animate({left: "0"}, 500)    
    });
})

http://jsfiddle.net/Narcis/rmtXC/

javascriptjqueryswipehammer.js
30
Nrc

このようなもの？ http://jsfiddle.net/6jxbv/119/

結果を取得するためにHammer(element).on("event", callback);を使用しています。この場合、swipeleftおよびswiperightイベントを追加しました。

スクリプトは上記の構文を使用して、次のようなイベントを追加します。

drag, dragstart, dragend, dragup, dragdown, dragleft, dragright
swipe, swipeup, swipedown, swipeleft, swiperight

JQueryで使用したい場合は、次の構文を提供します（私に尋ねると、ちょっと気まずいです）：

$(elementOrSelector).hammer().on("event", function(event) {
    //callback
});

ただし、jquery.hammer.jsプラグインを含める必要があります

ドキュメント を読んでみてください

編集：

ここでは、スワイプとドラッグを使用した例を見ることができます。スワイプは（マウスまたはタッチによる）速い動きであり、ドラッグは押しながら動くことを考慮に入れてください（実装は正しくありませんが、アニメーションはあなたにお任せします。:)）

http://jsfiddle.net/uZjCB/183/ およびフルスクリーン http://jsfiddle.net/uZjCB/183/embedded/result/

それが役に立てば幸い

33
nicosantangelo

Hammer.js 2.0では、Recognizerを使用する必要があります。

var blue      = document.getElementById('blue');
var hammer    = new Hammer.Manager(blue);
var swipe     = new Hammer.Swipe();

hammer.add(swipe);

hammer.on('swipeleft', function(){
   $(blue).animate({left: "-=100"}, 500)  
});

hammer.on('swiperight', function(){
   $(blue).animate({left: "+=100"}, 500)  
});

hammerの詳細を読む ドキュメント

11
Chris

JS fiddle を正しいHammer cdnで更新して、動作するようになりました：

$(function(){  
var red = document.getElementById("red");
var blue = document.getElementById("blue");

//Swipe
Hammer(red).on("swipeleft", function() {
    $(this).find(".color").animate({left: "-=100"}, 500);
    $("#event").text("swipe left");
});

Hammer(red).on("swiperight", function() {
    $(this).find(".color").animate({left: "+=100"}, 500);
    $("#event").text("swipe right");
});

// Drag
Hammer(blue).on("dragleft", function() {
    $(this).find(".color").animate({left: "-=100"}, 500);
    $("#event").text("drag left");
});

Hammer(blue).on("dragright", function() {
    $(this).find(".color").animate({left: "+=100"}, 500);
    $("#event").text("drag right");
});

}）;

5
gilberto lenzi