Firefox arrastra div como si fuera una imagen

Question

Estoy usando este código HTML, CSS y código Javascript (en un solo documento en conjunto si quieres probarlo):

<style type="text/css"> 
#slider_container { 
    width: 200px; 
    height: 30px; 
    background-color: red; 
    display:block; 
} 

#slider { 
    width: 20px; 
    height: 30px; 
    background-color: blue; 
    display:block; 
    position:absolute; 
    left:0; 
} 
</style> 
<script type="text/javascript" src="../../js/libs/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 

    $("#slider").mousedown(function() { 
     $(document).mousemove(function(evnt) { 
     $("#test").html("sliding"); 
    }).mouseup(function() { 
     $("#test").html("not sliding"); 
     $(document).unbind("mousemove mouseup"); 
    });}); 

}); 
</script> 

<div id="test">a</div> 
<div id="slider_container"> 
    <div id="slider"></div> 
</div> 

Todo (sorprendentemente) funciona bien en IE, pero firefox parece totalmente clusterf * ck cuando se utiliza este javascript. La primera "diapositiva" está bien, arrastre, dice "deslizamiento", suelta, dice "no se desliza". En la segunda "diapositiva" (o mousedown si lo deseas), firefox de repente piensa que div es una imagen o enlace y quiere arrastrarlo.

Captura de pantalla del arrastre:

Obviamente, el azul div-media posicionado en el div rojo es el que está siendo arrastrado. Windows no captura el cursor cuando toma una captura de pantalla, pero es una señal de alto.

¿Hay alguna manera de evitar este comportamiento predeterminado?

Answer 1

Debe devolver false de los controladores de eventos para evitar la acción predeterminada (seleccionar texto, arrastrar la selección, etc.). Basado en el código publicado por Crispy, Aquí está mi solución:

$(function() { 
    var sliderMouseDown = false; 

    $("#slider").mousedown(function() { 
     sliderMouseDown = true; 
     return false; 
    }); 
    $(document).mousemove(function(evnt) { 
     if (sliderMouseDown) { 
      $("#test").html("sliding"); 
      return false; 
     } 
    }); 
    $(document).mouseup(function() { 
     if (sliderMouseDown){ 
      $("#test").html("not sliding"); 
      sliderMouseDown = false; 
      return false; 
     } 
    }); 
}); 

Answer 2

Neat error, después de jugar con él, parece que Firefox recuerda el evento mousedown en el control deslizante y lo trata como si el usuario hubiera comenzado a seleccionar texto (de ahí el "signo de stop" que estaba viendo). Entonces, Firefox trata el siguiente evento de mousedown como si el usuario estuviera arrastrando el texto a alguna parte. Puede haber una solución más apropiada, pero simplemente agregando un $("#slider").focus() hace el truco ya que entonces Firefox "reiniciará" el cursor para que no piense que el usuario está arrastrando algo de texto.

También me gustaría comentar que repetidamente está vinculando y desvinculando eventos (lo que no parece encajar bien con ie7 haciendo múltiples drags). Sugeriría algo como lo siguiente, que une a los delegados una vez.

$(function() { 
    var sliderMouseDown = false; 

    $("#slider").mousedown(function() { 
     sliderMouseDown = true; 
    }); 
    $(document).mousemove(function(evnt) { 
     if (sliderMouseDown) { 
      $("#test").html("sliding"); 
     } 
    }); 
    $(document).mouseup(function() { 
     if (sliderMouseDown) 
     { 
      $("#test").html("not sliding"); 
      $("#slider").focus(); //<-- fix the FF issue to reset cursor 
      sliderMouseDown = false; 
     } 
    }); 

});