javascript - style - Cómo usar el martillo para deslizar

title css

Question

He encontrado un recurso interesante: Hammer.js. Intenté deslizar con Hammer y jQuery.

1) He descargado el código here
2) He puesto ese código en un documento. Pongo un enlace a ese código en la parte <script src="hammer.js"></script> del documento que quiero usar swipe: <script src="hammer.js"></script>
3) No sé cómo usarlo. Intento hacer algo similar a esto en jQuery. Quiero decir que quiero deslizar en lugar de hacer clic:

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

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

Answer 1

¿Algo como esto? http://jsfiddle.net/6jxbv/119/

Estoy usando Hammer(element).on("event", callback); para obtener el resultado. En este caso, agregué los eventos swipeleft y swiperight .

El script usa la sintaxis descrita anteriormente para agregar eventos como:

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

Si quieres usarlo con jQuery, proporcionan esta sintaxis (lo cual es un poco incómodo si me preguntas):

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

Pero tienes que incluir el complemento jquery.hammer.js

Trate de leer here para más información

EDITAR:

Aquí, puedes ver un ejemplo usando deslizar y arrastrar. Tenga en cuenta que deslizar es un movimiento rápido (con el mouse o toque) y arrastrar es presionar y mover (por lo que la implementación no es correcta, pero le dejaré el animado).

http://jsfiddle.net/uZjCB/183/ y pantalla completa http://jsfiddle.net/uZjCB/183/embedded/result/

Espero eso ayude

Answer 2

Con Hammer.js 2.0 necesitas usar un reconocedor:

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

Lea más en la documentation Hammer

Answer 3

actualizando el fiddle de JS con el cdn correcto de Hammer para que ahora funcione:

$(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");
});

});