-2

jquery.でプレーヤーのボリュームスライダーのようなスライダーを設計しましたが、問題はFIREFOXでのみ発生します。最初にスライダーをドラッグすると正常ですが、2回目はブラウザーが画像をドラッグするようにそのdivをドラッグします.最初のドラッグ後にクリックしない限り空の領域を選択して、もう一度スライダーをドラッグします。ここで何が問題なのですか? 私の悪い英語でごめんなさい。

編集 ：

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

});
4

2 に答える 2

2

Firefoxが使用しようとしている動作を防ぐために、を追加e.preventDefault();することができます。mousedown

于 2013-01-06T21:42:53.780 に答える
0

このコードをcssに追加すると、divが選択されなくなります。これで問題が解決しました。

-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
于 2013-01-06T21:44:50.760 に答える