web-dev-qa-db-fra.com

Comment utiliser Hammer pour glisser

J'ai trouvé une ressource intéressante: Hammer.js. J'ai essayé de glisser avec Hammer et jQuery.

1) J'ai téléchargé le code ici
2) J'ai mis ce code dans un document. J'ai mis un lien vers ce code dans la tête du document que je veux utiliser swipe: <script src="hammer.js"></script>
3) Je ne sais pas comment l'utiliser. J'essaie de faire quelque chose de similaire à cela dans jQuery. Je veux dire que je veux glisser au lieu de cliquer:

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

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

javascriptjqueryswipehammer.js
30
Nrc

Quelque chose comme ça? http://jsfiddle.net/6jxbv/119/

J'utilise Hammer(element).on("event", callback); pour obtenir le résultat. Dans ce cas, j'ai ajouté les événements swipeleft et swiperight.

Le script utilise la syntaxe décrite ci-dessus pour ajouter des événements tels que:

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

Si vous voulez l'utiliser avec jQuery, ils fournissent cette syntaxe (ce qui est un peu gênant si vous me le demandez):

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

Mais vous devez inclure le jquery.hammer.js brancher

Essayez de lire les documents pour plus d'informations

MODIFIER:

Ici, vous pouvez voir un exemple en utilisant glisser-déplacer. Tenez compte du fait que le glissement est un mouvement rapide (avec la souris ou le toucher) et que le glissement est pressant et en mouvement (donc l'implémentation n'est pas correcte, mais je vous laisse l'animation. :))

http://jsfiddle.net/uZjCB/183/ et plein écran http://jsfiddle.net/uZjCB/183/embedded/result/

J'espère que ça aide

33
nicosantangelo

Avec Hammer.js 2.0, vous devez utiliser un module de reconnaissance:

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)  
});

en savoir plus sur Hammer documentation

11
Chris

mise à jour du violon JS avec le CDN Hammer correct alors maintenant ça marche:

$(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