Question

我必须防止范围滑块形式重叠的可拖动手柄。这是vanilla js插件。

如果两个句柄位置之间的差异小于20px，我尝试禁用更新偏移。它有时会起作用，但屏障不准确。当手柄彼此靠近时，机芯会起伏不定。手柄不能立即拖动，但几次移动后。

以下是插件代码的片段：

// 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";

  }

}

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

1 个答案: