Перемещение большого пальца по тропе с привязкой - PullRequest
Новая
       6

Перемещение большого пальца по тропе с привязкой

0 голосов
/ 10 января 2019

Во-первых, приведите пример ниже.

Этот компонент должен работать точно так же, как диапазон типов ввода. Проблема, с которой я сталкиваюсь, состоит в том, чтобы вычислить значение шага, и привязать большой палец к следу, основываясь на пропорции текущего шага и максимального значения (снова , точно так же, как ввод диапазона * 1006). *).

Любые ответы, которые используют собственный диапазон ввода для управления этим поведением, приветствуются. Я не использовал его только из-за защелки, которая не является гладкой. 

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>

1 Ответ

0 голосов
/ 10 января 2019

Я думаю, что вам просто не хватает нескольких вычислений и вспомогательных функций, чтобы определить как привязать.

Сначала нам понадобится обёртка: 

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);

Это можно использовать как свойство .left элемента thumb.

jsFiddle для иллюстрации.

...