Pouvez-vous détecter "glisser" dans jQuery?

Question

J'ai un throbber qui doit apparaître lorsqu'un utilisateur clique sur un lien.

Le problème est que ce même lien peut être cliqué et glissé pour être réorganisé. Dans ce cas, je n'aurais pas besoin de la throbber pour apparaître. Il suffit qu'elle apparaisse si elle attend réellement d'aller quelque part.

Comment puis-je, avec jQuery, créer un écouteur d'événement qui permettrait uniquement à un throbber d'apparaître s'il s'agit d'un clic sur un lien , et non d'un clic-glisser?

Answer 1

À la souris, commencez à vérifier les mouvements de la souris. Sur mouseup, vérifiez si la souris s'est déplacée. Si ça bougeait, on traînait. Si nous n'avons pas déménagé, c'est un clic.

 var isDragging = false;
$("a")
.mousedown(function() {
    $(window).mousemove(function() {
        isDragging = true;
        $(window).unbind("mousemove");
    });
})
.mouseup(function() {
    var wasDragging = isDragging;
    isDragging = false;
    $(window).unbind("mousemove");
    if (!wasDragging) { //was clicking
        $("#throbble").show();
    }
});
 

Voici une démo: http://jsfiddle.net/W7tvD/

Answer 2

Pour une raison quelconque, les solutions ci-dessus ne fonctionnaient pas pour moi. Je suis allé avec ce qui suit:

 $('#container').on('mousedown', function(e) {
    $(this).data('p0', { x: e.pageX, y: e.pageY });
}).on('mouseup', function(e) {
    var p0 = $(this).data('p0'),
        p1 = { x: e.pageX, y: e.pageY },
        d = Math.sqrt(Math.pow(p1.x - p0.x, 2) + Math.pow(p1.y - p0.y, 2));

    if (d < 4) {
        alert('clicked');
    }
})
 

Vous pouvez modifier la limite de distance à votre guise, ou même la porter à zéro.

Answer 3

Essayez ceci: il montre quand est «traîné» état. ;) lien de violon

 $(function() {
    var isDragging = false;
    $("#status").html("status:");
    $("a")
    .mousedown(function() {
        $("#status").html("status: DRAGGED");        
    })
    .mouseup(function() {
        $("#status").html("status: dropped");   
    });

    $("ul").sortable();
});
 

Answer 4

Pour cette manière la plus simple, appuyez sur Démarrer, touchez déplacer et touchez fin. Cela fonctionne à la fois pour les PC et les appareils tactiles. Vérifiez-le simplement dans la documentation de jQuery et espérez que c'est la meilleure solution pour vous. bonne chance

Answer 5

Vous devez définir une minuterie. Lorsque le délai expire, lancez le throbber et enregistrez le clic. Lorsque le glissement se produit, effacez le minuteur pour qu'il ne soit jamais terminé.