Div滑块未随鼠标移动而正确移动

Div slider not moving correctly with mouse movement

本文关键字：移动 鼠标 Div      更新时间：2023-09-26

我用Javascript制作了一个滑块，但它的移动不太正确，它似乎在加速，而不是保持与鼠标相同的速度。

我知道这是一个逻辑错误，但我不知道我做错了什么，所以我希望有人能发现这个错误。

处理div的函数是：

var calc = function (e) {
    var dif = e.pageX - clickX;
    var parentWidth = parseInt(window.getComputedStyle(el.parentNode).width);
    var childWidth = parseInt(window.getComputedStyle(el).width);
    var childLeft = parseInt(window.getComputedStyle(el).left);
    var left = childLeft + dif;
    if (left < 0) { left = 0; }
    else if (left > (parentWidth-childWidth)) { left = (parentWidth-childWidth); }
    el.style.left = left + 'px';
};

我提供了一个JSFiddle以及正在使用的：JSFiddle

非常整洁的小部件/实现。我更新了小提琴以使其正常工作。

增加

    var dif = e.pageX - clickX;
    clickX = e.pageX;// update clickX so next time you calculate the right dif

因为除此之外，它从一开始就计算差异，而不是从上次计算差异开始。

相关文章：