javascript - 通过捕捉移动拇指穿过轨迹

Question

首先，与下面的示例进行交互。

该组件的工作方式必须与输入类型范围完全相同。我遇到的问题是计算步长值，并根据当前步长和最大值的比例将拇指插入轨迹(再次，就像范围输入)。

欢迎任何使用 native 范围输入来控制此行为的响应。我没有使用它只是因为卡扣不顺畅。

const thumb = document.querySelector(".stepper__step");
const trail = document.querySelector(".stepper__trail");

// Variables that controls the range snap and values
var minVal = 0;
var maxVal = 20;
var step = 2;

thumb.ondragstart = function() {
  return false;
};

thumb.addEventListener("mousedown", function(event) {
  event.preventDefault();
  addGrabbingClassFromThumb();

  let shiftX = event.clientX - thumb.getBoundingClientRect().left;
  // shiftY not needed, the thumb moves only horizontally

  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);

  function onMouseMove(event) {
    let newLeft = event.clientX - shiftX - trail.getBoundingClientRect().left;

    // the pointer is out of trail => lock the thumb within the bounaries
    if (newLeft < 0) {
      newLeft = 0;
    }
    let rightEdge = trail.offsetWidth - thumb.offsetWidth;
    if (newLeft > rightEdge) {
      newLeft = rightEdge;
    }

    thumb.style.left = newLeft + "px";
  }

  function onMouseUp() {
    document.removeEventListener("mouseup", onMouseUp);
    document.removeEventListener("mousemove", onMouseMove);
  }
});

thumb.addEventListener("mouseup", function() {
  removeGrabbingClassFromThumb();
});

function addGrabbingClassFromThumb() {
  thumb.className += " stepper__step--grabbing";
}

function removeGrabbingClassFromThumb() {
  thumb.className = thumb.className.replace(/stepper__step--grabbing/g, "");
}

body {
  background-color: #333333;
}

.stepper-wrapper {
  width: 350px;
  margin: 80px auto;
  position: relative;
}

.stepper__trail {
  height: 2px;
  background-color: rgba(255, 255, 255, 0.25);
}

.stepper__step {
  height: 20px;
  position: absolute;
  left: 0;
  width: 50px;
  bottom: 0;
  transition: left 0.25s ease-in-out;
  cursor: -webkit-grab;
  cursor: grab;
}
.stepper__step:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  background-color: #fff;
}

.stepper__step--grabbing {
  cursor: -webkit-grabbing;
  cursor: grabbing;
  transition: unset;
}

<div class="stepper-wrapper">
  <div class="stepper__step"></div>
  <div class="stepper__trail"></div>
</div>

Answer 1

我认为您只是缺少一些计算和辅助函数来确定如何捕捉。

首先，我们需要包装器:

const wrapper = document.querySelector('.stepper-wrapper');

接下来，我们需要计算一些值来生成我们的范围点:

const containerWidth = wrapper.offsetWidth
const pixelsPerStep = Math.round(containerWidth / maxVal)
const totalSteps = Math.round(pixelsPerStep / step);

几个快速的辅助函数可以生成我们的范围并找到我们最近的可能点来捕捉:

const range = (start, stop, step = 1) =>
  Array(Math.ceil((stop - start) / step)).fill(start).map((x, y) => x + y * step)

const closest = (range, goal) => {
  return range.reduce((prev, curr) => {
    return (Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev)
  })
}

在我们的 mousedown 事件监听器中，我们可以生成可以捕捉的点:

const snapTo = closest(rangePoints, newLeft);

这可以用作 thumb 元素的 .left 属性。

jsFiddle用于说明。