如何防止范围滑块中的可拖动手柄重叠？

Question

我必须防止范围滑块中的可拖动手柄重叠。这是一个普通的js插件。

如果两个句柄位置之间的差异小于20px，我尝试禁用更新偏移量。它有时是有效的，但障碍并不精确。当控制柄靠近每个other.The控制柄时，移动是断断续续的，无法立即拖动，但需要经过几次移动。

以下是插件代码的片段：

// HELPERS
// map slider range to value range
Number.prototype.map = function(in_min, in_max, out_min, out_max) {
    return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
// round to nearest multiple
Number.prototype.roundTo = function(num) {
    var resto = this % num;
    if (resto <= (num / 2)) {
        return this - resto;
    } else {
        return this + num - resto;
    }
}


//EVENTS
var EVmove = ('ontouchstart' in document.documentElement) ? 'touchmove' : 'mousemove',
    EVmove = ('ontouchstart' in document.documentElement) ? 'touchmove' : 'mousemove',
    EVend = ('ontouchstart' in document.documentElement) ? 'touchend' : 'mouseup';


document.addEventListener(EVmove, actions.move, false);
document.addEventListener(EVend, function() {
    return movebar = false;
}, false);
document.addEventListener(EVstart, function() {
    return movebar = true;
}, false);

var movebar = true;

// MOVE HANDLE
actions.move = function(event) {
    var clientX = ('ontouchstart' in document.documentElement) ? event.touches[0].clientX : event.clientX;
    leftOffset = clientX - posX;

    // move handle bar
    if (movebar) {

        element.style.left = leftOffset + "px";
        var v = leftOffset.map(0, elWidth, 0, window.range); // 0

        var value = v.roundTo(step);
        output.innerHTML = value.toFixed(2);

        // prevent handles ovelaping
        if (vsOpts.range) {

            var diff = Math.abs(parseInt(handle1.offsetLeft) - parseInt(handle2.offsetLeft));

            if (diff < 20) {
                movebar = false;

            }

        }


    }

}

Answer 1

我通过将相对句柄的位置指定为当前句柄的限制位置来解决此问题。

document.addEventListener(EVstart, function(event) {

    if (event.target.id == "vslider-handle1") {
        useHandle1 = true
    } else {
        useHandle1 = false
    }
    return movebar = true;
}, false);

}

handle1Limit=parseInt(handle2.offsetLeft);
handle2Limit=parseInt(handle1.offsetLeft);
handle1Pos=  parseInt(handle1.offsetLeft);
handle2Pos=  parseInt(handle2.offsetLeft);


if(useHandle1){ 

  if(handle1Pos>=handle1Limit){

   handle1.style.left = handle1Limit + "px";
   handle2.style.left = handle1Limit + "px";

  }

}
else{ 

  if(handle2Pos<=handle2Limit){

   handle2.style.left = handle2Limit + "px";
   handle1.style.left = handle2Limit + "px";

  }

}