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

这有两个问题：

首先，当单击父级时，在滑块开始拖动之前我会延迟几秒钟？我已经在 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 回答