Riesci a rilevare “trascinamento” in jQuery?

Ho uno stroboscopio che deve apparire quando un utente fa clic su un link.

Il problema è che lo stesso link può essere cliccato e trascinato per essere riorganizzato. In questo caso, non avrei bisogno che il throbber appaia. Deve solo apparire se è in realtà in attesa di andare da qualche parte.

Come posso, con jQuery, creare un listener di eventi che consentirebbe solo la visualizzazione di un throbber se si tratta di un click-through a un link , e non di un clic e di un trascinamento?

Sul mouse, inizia a impostare lo stato, se l’evento mousemove viene triggersto, registralo, infine su mouseup, controlla se il mouse si è spostato. Se si è mosso, stiamo trascinando. Se non ci siamo spostati, è 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(); } }); 

Ecco una demo: http://jsfiddle.net/W7tvD/1399/

Per qualche ragione, le soluzioni di cui sopra non funzionavano per me. Sono andato con il seguente:

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

Puoi modificare il limite di distanza in base alle tue preferenze o addirittura portarlo a zero.

Con l’interfaccia utente di jQuery basta fare questo!

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

Prova questo: mostra quando è stato “trascinato”. 😉 collegamento violino

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

Questa soluzione utilizza le funzioni “on” e “off” per associare un evento unbind a mousemove (binding e unbind sono deprecati). È inoltre ansible rilevare la modifica delle posizioni x e y del mouse tra due eventi mousemove.

Per questo il modo più semplice è iniziare con il touch, toccare muovere e toccare fine. Funzionando sia per PC che per dispositivo touch, è sufficiente verificarlo nella documentazione di jQuery e sperare che questa sia la soluzione migliore per te. in bocca al lupo

plugin jQuery basato sulla risposta di Simen Echholt. L’ho chiamato solo 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); }); }); }; 

In uso:

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

^^

Assicurati di impostare l’attributo trascinabile dell’elemento su false in modo da non avere effetti collaterali durante l’ascolto di eventi mouseup:

 
text

Quindi, puoi usare 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; }); }); 

Hai bisogno di impostare un timer. Quando il timer scade, avvia il palco e registra il clic. Quando si verifica il trascinamento, azzerare il timer in modo che non venga mai completato.

Se stai usando jQueryUI – c’è un evento onDrag. Se non lo sei, collega l’ascoltatore a mouseup (), non a clic ().

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

Non devi impostare la variabile, puoi semplicemente impostarla se si sta spostando nell’attributo dei dati

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