如何让多个句柄在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）。