Firefox drags div like it was an image, javascript event handlers possibly to blame

Question

Hi, I'm using this HTML,CSS and Javascript code (in one document together if you want to test it out):

<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>

Everything (surprisingly) works fine in IE, but firefox seems to totally clusterf*ck when this javascript is used. The first "slide" is okay, you drag, it says "sliding", you drop, it says "not sliding". On the second "slide" (or mousedown if you will), firefox suddenly thinks the div is an image or link and wants to drag it around.

Screenshot of the dragging:

Obviously the blue div half-positioned in the red div is the one being dragged. Windows does not capture the cursor when you take a screenshot, but it's a stop sign.

Is there someway to prevent this default behaviour?

Answer 1

Neat bug, after messing around with it, it appears that Firefox remembers the mousedown event on the slider and treats it as if the user had started selecting some text (hence the "stop sign" you were seeing). So then Firefox treats the next mousedown event as if the user was dragging the text away somewhere. There might be a more appropriate solution, but simply adding a $("#slider").focus() does the trick since then Firefox will "reset" the cursor so it won't think the user is dragging some text.

I'd also like to comment you're repeatedly binding and unbinding events (which doesn't seem to sit well with ie7 doing multiple drags). I would suggest something like the following, which binds the delegates once.

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

});

Answer 2

You need to return false from the event handlers to prevent the default action (selecting text, dragging selection, etc). Based on the code posted by Crispy, Here is my solution:

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