0

draggable()jQuery UIの機能から作られた自家製のスライダーがあります：

$("#petrolGauge .fuelBar .slider").draggable({
    containment: "parent",
    axis: "x",
    drag:function(){
        updValues();
    },
    start:function(){
        $(this).css("background-color","#666");
    },
    stop:function(){
        //checkForm();
        $(this).css("background-color","#AAA");
    }
});

これは、次のマークアップ用です。

<div id="petrolGauge">
    <input id="endPet" name="endPet" type="hidden" value="0">
    How much fuel was left in the tank when you were finished? (Use the slider) <b>(~<span class="petLeft">0</span>%)</b>
    <span class="mandatory">*</span><br />
    <div class="fuelBar">
        <div title="Drag" class="slider"></div>
    </div>

スライダーをクリックすると、これはうまくいきます。しかし、燃料バー (スライダーの親) をクリックすると、スライダーがドラッグを開始するだけでなく、カーソルにジャンプするようにしたいと思います。私はこれを行うことでそれを達成しました:

$("#petrolGauge .fuelBar").on("mousedown",function(e){
    slider = $("#petrolGauge .fuelBar .slider");
    left = e.pageX-($(this).offset().left)-(slider.width()/2);
    updValues();
    slider.css("left",left).trigger(e);
});

これには2つの問題があります：

まず、親をクリックすると、スライダーがドラッグを開始する前に数秒の遅延が発生しますか? Chrome と IE でこれを試してみましたが、どちらもそれを行います。次に、カーソルが親の端からスライダーの幅の半分未満離​​れている場合、スライダーは親の外側に移動します。いくつかのチェックでこれを修正するのは難しくありませんが、別の方法があるかどうか疑問に思っていましたか? draggable()正直なところ、これにはパラメーターがないことに驚いています。助けられるなら使いたくなかっslider()たが、それが唯一の方法なら、それが唯一の方法だ.

これは、使用するフィドルです。

4

1 に答える 1

1

遅延が発生する理由は、大きなループを作成するイベント.trigger()内で使用するためです。.on()その結果、ループは移動プロセスを遅くします。

$("#petrolGauge .fuelBar").click(function (e) { // use click instead of mousedown
    slider = $("#petrolGauge .fuelBar .slider");
    left = e.pageX - ($(this).offset().left) - (slider.width() / 2);
    if(left > 570) { left = 570; } else if(left < 0) { left = 0; }
    // it looks like a draggable bug due to the manual position change, so use a small check
    slider.css("left", left); // change the position first
    updValues();              // then calculate and update the div 
    // no need to trigger the event a second time because it will loop until jQuery exceeds it's trigger limit.
});

ここに更新されたFIDDLEがあります

更新された回答

.slider直接ドラッグしていないときにマウスの動きに合わせて移動するには、 にイベントmousemoveをmousedownバインドし、 のときにバインドを解除しmouseupます。次に、.mousemove() の位置を変更します.slider。

var move = function (e) {
    left = e.pageX - ($('#petrolGauge .fuelBar').offset().left) - (slider.width() / 2);
    if (left > 570) {
        left = 570;
    } else if (left < 0) {
        left = 0;
    }
    slider.css("left", left);
    updValues();
};
var slider = $("#petrolGauge .fuelBar .slider");
$("#petrolGauge .fuelBar").mousedown(function (e) {
    e.preventDefault();
    left = e.pageX - ($(this).offset().left) - (slider.width() / 2);
    if (left > 570) {
        left = 570;
    } else if (left < 0) {
        left = 0;
    }
    slider.css("left", left)
    $(this).bind('mousemove', move);
    updValues();
}).mouseup(function () {
   $(this).unbind('mousemove');
});
于 2013-05-02T11:31:48.497 に答える