Question

i have designed a slider like players volume sliders with jquery.but the problem is ONLY IN FIREFOX , first time when i drag slider it’s normal but second time browser drags that div it self like dragging images.unless after first time drag i click on an empty area and drag the slider again.what is the problem here?
sorry for my bad english.

EDIT :

http://codepen.io/anon/pen/bjChB

html:

<div id="btn_container">

    <div id="button"></div>

</div>

css:

div#btn_container{
width:200px;
height:60px;
position:absolute;
background:red;
margin:auto;
right:0;left:0;top:0;bottom:0;  
}
div#button{
width:60px;
height:60px;
background:blue;
position:absolute;
left:0px;top:0px;   
}

jquery:

$(document).ready(function() {
    var pressed = false;
    var $this;
    var x;
    $("div#button").mousedown(function(e){
        pressed = true;
        $this = $(this);
        var offset = $this.offset();
        var inside = e.pageX - offset.left;
        $(document).mousemove(function(e){
            if(pressed){
                var parentOffset = $this.parent().offset();
                x = e.pageX - parentOffset.left;
                if( x <= $this.parent().width() - $this.width() + inside && x >= 0 + inside)
                    $this.css({"left":x - inside});
            }
        });
    });
    $(document).mouseup(function(){
        if(pressed){
            if( x > $this.parent().width() - $this.width() - 30)
                $this.animate({"left":$this.parent().width() - $this.width()} , 50);

            pressed = false;
        }
    });

});

Answer 1

You can add e.preventDefault(); to your mousedown to prevent whatever behavior it is that firefox is trying to use.