javascript - 通过捕捉移动拇指
问题描述
首先,与下面的示例进行交互。
该组件的工作方式必须与输入类型范围完全相同。我遇到的问题是计算步长值,并根据当前步长和最大值的比例将拇指捕捉到轨迹中(再次,就像范围输入一样)。
欢迎使用本机范围输入来控制此行为的任何响应。我没有使用它只是因为按扣不流畅。
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>
解决方案
我认为您只是缺少一些计算和辅助函数来确定如何捕捉。
首先,我们需要包装器:
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用于说明。
推荐阅读
- symfony - 用户更新密码时如何让浏览器知道用户名?
- amazon-web-services - 使用 Lambda 函数运行 AWS Athena 的查询
- python - 无法使用 ON CONFLICT
- python - 如何附加多个 CSV 文件并在 Python 中添加指示文件名的附加列?
- c# - Web 浏览器 等待按钮加载
- c# - 如何保存和加载用户创建的游戏对象?
- javascript - 调用类和扩展类中的方法,并使用 if else 传递参数
- google-chrome - TypeError:无法读取未定义的属性“同步”。我该如何解决这个问题?
- python - Django 编辑表单安全方式
- bash - 将txt转换为分栏文件