Pouvez-vous détecter le «glissement» dans jQuery?

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 déplacé pour être réorganisé. Dans ce cas, je n'aurais pas besoin du throbber pour apparaître. Il n'a besoin d'apparaître que s'il attend réellement d'aller quelque part.

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

Sur mousedown, commencez à définir l'état, si l'événement mousemove est déclenché, enregistrez-le, enfin sur mouseup, vérifiez si la souris a bougé. S'il a bougé, nous avons traîné. Si nous n'avons pas bougé, c'est un clic.

var isDragging = false;
$("a")
.mousedown(function() {
    isDragging = false;
})
.mousemove(function() {
    isDragging = true;
 })
.mouseup(function() {
    var wasDragging = isDragging;
    isDragging = false;
    if (!wasDragging) {
        $("#throbble").toggle();
    }
});

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

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 ajuster la limite de distance à ce que vous voulez, ou même la ramener à zéro.

Avec jQuery UI, faites cela!

$( "#draggable" ).draggable({
  start: function() {

  },
  drag: function() {

  },
  stop: function() {

  }
});

$(".draggable")
.mousedown(function(e){
    $(this).on("mousemove",function(e){
        var p1 = { x: e.pageX, y: e.pageY };
        var p0 = $(this).data("p0") || p1;
        console.log("dragging from x:" + p0.x + " y:" + p0.y + "to x:" + p1.x + " y:" + p1.y);
        $(this).data("p0", p1);
    });
})
.mouseup(function(){
    $(this).off("mousemove");
});

Cette solution utilise les fonctions "on" et "off" pour lier un événement de détachement d'un mousemove (la liaison et la dissociation sont obsolètes). Vous pouvez également détecter le changement des positions x et y de la souris entre deux événements mousemove.

Essayez ceci: il montre quand est l'état «glissé». ;) lien violon

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

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

J'ai bifurqué de la réponse acceptée pour ne courir que lorsque le clic est maintenu vers le bas et traîné .

Ma fonction fonctionnait alors que je ne tenais pas la souris enfoncée. Voici le code mis à jour si vous souhaitez également cette fonctionnalité:

var isDragging = false;
var mouseDown = false;

$('.test_area')
    .mousedown(function() {
        isDragging = false;
        mouseDown = true;
    })
    .mousemove(function(e) {
        isDragging = true;

        if (isDragging === true && mouseDown === true) {
            my_special_function(e);
        }
     })
    .mouseup(function(e) {

        var wasDragging = isDragging;

        isDragging = false;
        mouseDown = false;

        if ( ! wasDragging ) {
            my_special_function(e);
        }

    }
);

Pour ce moyen le plus simple, touchez le début, touchez le mouvement et touchez la fin. Cela fonctionne à la fois pour le PC et le périphérique tactile, il suffit de le vérifier dans la documentation jquery et j'espère que c'est la meilleure solution pour vous. bonne chance

Plugin jQuery basé sur la réponse de Simen Echholt. Je l'ai appelé un seul clic.

/**
 * jQuery plugin: Configure mouse click that is triggered only when no mouse move was detected in the action.
 * 
 * @param callback
 */
jQuery.fn.singleclick = function(callback) {
    return $(this).each(function() {
        var singleClickIsDragging = false;
        var element = $(this);

        // Configure mouse down listener.
        element.mousedown(function() {
            $(window).mousemove(function() {
                singleClickIsDragging = true;
                $(window).unbind('mousemove');
            });
        });

        // Configure mouse up listener.
        element.mouseup(function(event) {
            var wasDragging = singleClickIsDragging;
            singleClickIsDragging = false;
            $(window).unbind('mousemove');
            if(wasDragging) {
                return;
            }

            // Since no mouse move was detected then call callback function.
            callback.call(element, event);
        });
    });
};

Utilisé:

element.singleclick(function(event) {
    alert('Single/simple click!');
});

^^

Assurez-vous de définir l' attribut déplaçable de l'élément sur false afin de ne pas avoir d'effets secondaires lors de l'écoute des événements mouseup:

<div class="thing" draggable="false">text</div>

Ensuite, vous pouvez utiliser jQuery:

$(function() {
  var pressed, pressX, pressY,
      dragged,
      offset = 3; // helps detect when the user really meant to drag

  $(document)
  .on('mousedown', '.thing', function(e) {
    pressX = e.pageX;
    pressY = e.pageY;
    pressed = true;
  })
  .on('mousemove', '.thing', function(e) {
    if (!pressed) return;
    dragged = Math.abs(e.pageX - pressX) > offset ||
              Math.abs(e.pageY - pressY) > offset;
  })
  .on('mouseup', function() {
    dragged && console.log('Thing dragged');
    pressed = dragged = false;
  });
});

Vous devez régler une minuterie. Lorsque la minuterie expire, démarrez le throbber et enregistrez le clic. Lorsqu'un glissement se produit, effacez le minuteur pour qu'il ne se termine jamais.

Si vous utilisez jQueryUI, il existe un événement onDrag. Si ce n'est pas le cas, attachez votre auditeur à mouseup (), et non à cliquer ().

// here is how you can detect dragging in all four directions
var isDragging = false;
$("some DOM element").mousedown(function(e) {
    var previous_x_position = e.pageX;
    var previous_y_position = e.pageY;

    $(window).mousemove(function(event) {
        isDragging = true;
        var x_position = event.pageX;
        var y_position = event.pageY;

        if (previous_x_position < x_position) {
            alert('moving right');
        } else {
            alert('moving left');
        }
        if (previous_y_position < y_position) {
            alert('moving down');
        } else {
            alert('moving up');
        }
        $(window).unbind("mousemove");
    });
}).mouseup(function() {
    var wasDragging = isDragging;
    isDragging = false;
    $(window).unbind("mousemove");
});

Vous n'avez pas à configurer la variable, vous pouvez simplement définir si elle se déplace dans l'attribut de données

$youtubeSlider.find('a')
    .on('mousedown', function (e) {
        $(this).data('moving', false);
    })
    .on('mousemove', function (e) {
        $(this).data('moving', true);
    })
    .on('mouseup', function (e) {
        if (!$(this).data('moving')) {
            // Open link
        }
    });

J'avais besoin d'une fonction qui garde toujours la trace de la position de la souris et détecte le glissement vers la gauche, la droite, le haut et le bas. Il ne se déclenche pas non plus au clic mais nécessite un déplacement minimum de 15 pixels

/**
 * Check for drag when moved minimum 15px
 * Same time keep track of mouse position while dragging
 */
// Variables to be accessed outside in other functions
var dragMouseX;
var dragMouseY;
var myDragging = false; // true or false
var dragDirectionX = false; // left or right
var dragDirectionY = false; // top or bottom

$(document).on("mousedown", function(e) {
    // Reset some variables on mousedown
    var lastDirectionCheck = e.timeStamp;
    var dragStartX = e.pageX;
    var dragStartY = e.pageY;
    dragMouseX = e.pageX;
    dragMouseY = e.pageY;
    myDragging = false;
    dragDirectionX = false;
    dragDirectionY = false;

    // On the move
    $(document).on("mousemove", function(e) {
        dragMouseX = e.pageX;
        dragMouseY = e.pageY;

        // Recalculate drag direction every 200ms in case user changes his mind
        if (e.timeStamp > (lastDirectionCheck + 200)) {
            dragStartX = dragMouseX;
            dragStartY = dragMouseY;
            lastDirectionCheck = e.timeStamp;
        }

        // Check for drag when moved minimum 15px in any direction
        if (!myDragging && Math.abs(dragStartX - dragMouseX) > 15 || Math.abs(dragStartY - dragMouseY) > 15) {
            myDragging = true;
        }
        if (myDragging) {
            // Check drag direction X
            if (dragStartX > dragMouseX) dragDirectionX = 'left';
            if (dragStartX < dragMouseX) dragDirectionX = 'right';

            // Check drag direction Y
            if (dragStartY > dragMouseY) dragDirectionY = 'top';
            if (dragStartY < dragMouseY) dragDirectionY = 'bottom';

            // console.log(dragDirectionX + ' ' + dragDirectionY);
        }
    });
});

// Reset some variables again on mouseup
$(document).on("mouseup", function() {
    $(document).off("mousemove");
    myDragging = false;
    dragDirectionX = false;
    dragDirectionY = false;
});