如何讓多個句柄在jQuery UI滑塊中重疊？

Question

我想要有一個jQuery UI滑塊，它有兩個可以設置爲彼此獨立的值的手柄。

我也希望它們的樣式使得一個手柄位於滑塊的「頂部」，另一個手柄位於下方。

問題是，當兩個手柄共享相同的值時，jQuery UI認爲其中一個手柄仍然處於「頂部」，因此在調整另一個手柄之前需要移動其中一個手柄。如果頂部手柄設置爲一個值，則底部手柄移動到相同值，頂部手柄不能移動，直到底部手柄先移開。該場景很難描述，所以下面有一個小提琴鏈接。

有什麼辦法可以指定jQuery UI我點擊的句柄是我想要主動移動的句柄嗎？

JS小提琴鏈接在這裏： https://jsfiddle.net/rqpndLsL/

我的滑塊如何設置：

$('.slider').slider({ 
    min: 0, 
    max: 400, 
    step: 50, 
    values: [200, 200], 
    range: false, 
}) 

Answer 1

我不知道這是否是去它的最好方法，但這種方法結束了爲我工作。如果有人遇到同樣的問題，我會在這裏回答。

縱觀jQuery API，看起來活動句柄是基於某種距離計算的，當我想要的只是被點擊的句柄。

我覆蓋了jQuery UI _mouseCapture事件並將其定製爲點擊敏感。它還需要一些硬集CSS類檢測來確定哪個句柄是活動句柄。

通過做這樣的事情，我能夠避免修改任何庫文件，只改變了少量的原始功能。

// Create the slider. 
var slider = $('.slider').slider({//OPTIONS HERE}); 

// Get the slider and replace the _mouseCapture function with a custom one. 
slider.data('ui-slider')._mouseCapture = function(event) { 
    var position, normValue, distance, closestHandle, index, allowed, offset, mouseOverHandle, 
     that = this, 
     o = this.options; 

    if (o.disabled) { 
    return false; 
    } 

    this.elementSize = { 
    width: this.element.outerWidth(), 
    height: this.element.outerHeight() 
    }; 
    this.elementOffset = this.element.offset(); 

    // Get the element that the click was triggered on and set that to closestHandle. There was a bunch of distance calculation here previously - that has been removed. 
    currentHandle = $(event.toElement); 
    closestHandle = currentHandle; 
    // 'custom-handle-1' is a custom class I give to the left slider handle 
    // I know that my sliders will only have 2 values (so index will either be 0 or 1 always). 
    if (closestHandle.hasClass('custom-handle-1')) { 
    index = 0; 
    } 
    else { 
    index = 1; 
    } 

    allowed = this._start(event, index); 
    if (allowed === false) { 
    return false; 
    } 
    this._mouseSliding = true; 

    this._handleIndex = index; 

    this._addClass(closestHandle, null, "ui-state-active"); 
    closestHandle.trigger("focus"); 

    offset = closestHandle.offset(); 
    mouseOverHandle = !$(event.target).parents().addBack().is(".ui-slider-handle"); 
    this._clickOffset = mouseOverHandle ? { left: 0, top: 0 } : { 
    left: event.pageX - offset.left - (closestHandle.width()/2), 
    top: event.pageY - offset.top - 
     (closestHandle.height()/2) - 
     (parseInt(closestHandle.css("borderTopWidth"), 10) || 0) - 
     (parseInt(closestHandle.css("borderBottomWidth"), 10) || 0) + 
     (parseInt(closestHandle.css("marginTop"), 10) || 0) 
    }; 

    if (!this.handles.hasClass("ui-state-hover")) { 
    this._slide(event, index, normValue); 
    } 
    this._animateOff = true; 
    return true; 
}; 

缺點是，這可能與jQuery的用戶界面的未來版本兼容，但是這是一個未來的問題（目前，這是1.12.1）。