Pouvez-vous détecter le “glisser” 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 que le throbber apparaisse. Il n’a besoin que d’apparaître si elle attend réellement d’aller quelque part.

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

Sur mousedown, définissez l’état, si l’événement mousemove est déclenché, enregistrez-le, enfin sur mouseup, vérifiez si la souris a bougé. Si ça bougeait, on traînait. 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 certaines raisons, 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 à ce que vous voulez, ou même la ramener à zéro.

Avec l’interface utilisateur de jQuery, faites ceci!

 $( "#draggable" ).draggable({ start: function() { }, drag: function() { }, stop: function() { } }); 

Essayez ceci: il montre quand est l’état “traîné”. 😉 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(); }); 
 $(".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 uncind un mousemove (bind et unbind sont obsolètes). Vous pouvez également détecter le changement des positions x et y de la souris entre deux événements mousemove.

Pour ce moyen le plus simple est le démarrage tactile, touchez le mouvement et touchez la fin. Cela fonctionne à la fois pour PC et appareil tactile, il suffit de le vérifier dans la documentation de jquery et espérons que c’est la meilleure solution pour vous. bonne chance

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

 /** * jQuery plugin: Configure mouse click that is sortingggered 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’atsortingbut draggable de l’élément sur false afin de ne pas avoir d’effets secondaires lors de l’écoute des événements Mouseup:

 
text

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 définir une timer. Lorsque la timer expire, lancez le throbber et enregistrez le clic. Lorsque vous faites glisser, effacez le minuteur afin qu’il ne se termine jamais.

Si vous utilisez jQueryUI, il existe un événement onDrag. Si vous ne l’êtes pas, attachez votre écouteur à mouseup (), pas cliquez ().

 // 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’atsortingbut 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 } });