¿Puedes detectar "arrastrar" en jQuery?

Question

Tengo una palpitación que debe aparecer cuando un usuario hace clic en un enlace.

El problema es que ese mismo enlace se puede hacer clic y arrastrar para reordenar. En este caso, no necesitaría que aparezca el throbber. Solo necesita aparecer si realmente está esperando ir a alguna parte.

¿Cómo puedo, con jQuery, crear un detector de eventos que sólo permitiría una Throbber que aparezca si su un clic a través de un enlace, y no un clic y arrastre?

Answer 1

En el mousedown, comience a establecer el estado, si el evento mousemove se dispara, regístrelo, finalmente en el mouseup, verifique si el mouse se movió. Si se movió, hemos estado arrastrando. Si no nos mudamos, es 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(); 
    } 
}); 

He aquí una demostración: http://jsfiddle.net/W7tvD/1399/

Answer 2

Tiene que configurar un temporizador. Cuando el temporizador se agota, comience la pulsación y registre el clic. Cuando se produce arrastre, borre el temporizador para que nunca se complete.

Answer 3

Si está utilizando jQueryUI, hay un evento onDrag. Si no es así, adjunte su oyente a mouseup(), no haga clic en().

Answer 4

Por alguna razón, las soluciones anteriores no estaban trabajando para mí. Fui con lo siguiente:

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

Se pueden ajustar el límite de distancia a lo que le plazca, o incluso llevarlo hasta el final a cero.

Answer 5

Para esta forma más simple es toque inicio, toque mover y toque final. Eso está funcionando tanto para PC como para dispositivos táctiles, solo verifíquelo en la documentación de jquery y espero que esta sea la mejor solución para usted. buena suerte

Answer 6

Pruebe esto: muestra cuándo está 'arrastrado'. ;) fiddle link

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

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

Answer 7

plugin de jQuery basado en la respuesta de Simen Echholt. Lo llamé un 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); 
     }); 
    }); 
}; 

En uso:

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

^^

Answer 8

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

Answer 9

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

Esta solución utiliza la "on" y "off" funciones para unirse a un unbind un evento mousemove (bind y desvincular están en desuso). También puede detectar el cambio en las posiciones xey del ratón entre dos eventos mousemove.

Answer 10

Con jQuery UI simplemente haz esto!

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

    }, 
    drag: function() { 

    }, 
    stop: function() { 

    } 
}); 

Answer 11

no tienes que variable de configuración, puede simplemente establecer si se está moviendo en los datos de atributos

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

Answer 12

asegúrese de que establece arrastrable atributo del elemento a modo falsa no tiene efectos secundarios cuando escucha eventos de mouseup:

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

Luego, puede usar jQue ry:

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