Question

我有一个由jQuery UI draggable()函数制作的自制滑块：

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

这有两个问题：

首先，当点击父母时，我会在滑块开始拖动之前得到几秒钟的延迟？我已经在Chrome和IE中尝试并测试了这一点，并且都做到了。其次，如果光标小于滑块宽度的一半远离父级边缘，滑块将移动到父级的外部。通过几次检查来解决这个问题并不难，但是想知道是否还有另一种方式？我很惊讶draggable()没有任何参数可以说实话。如果我能帮助它，我不想使用slider()，但如果这是唯一的方法，那么这是唯一的方法。

这是一个fiddle可以使用。

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

在父项上进行mousedown时，使可拖动元素跳转到光标（并开始拖动）的最佳方法

1 个答案: