为什么第一次尝试时拖动事件不会触发？

Question

我有一个 JavaScript 应用程序，我正在尝试处理拖动事件，但需要两次尝试拖动：

我希望用户能够拖动轨道位置栏上的手柄，以便他们可以向前跳过或返回轨道中的任何位置。但由于某种原因，用户必须尝试两次。他们第一次尝试拖动时，手柄不会移动（并且拖动处理程序不会触发）。第二次尝试时确实如此。

这是代码：

<div class="track-position-container">
    <div class="position-bar">
        <div class="completed-bar"></div>
        <div class="position-nob" ondrag="positionNobDragged(event)" ondragend="positionNobDragEnded(event)"></div>
    </div>
</div>

function positionNobDragged(event) {
    const positionBar = document.querySelector('.position-bar');
    const positionNob = document.querySelector('.position-nob');
    const completedBar = document.querySelector('.completed-bar');

    const x = event.x - positionBar.offsetLeft;

    positionNob.style.left = x;
    completedBar.style.width = completedBar.style.left + x;
}

function positionNobDragEnded(event) {
    positionNobDragged(event);
}

你可以去这里尝试一下：http://planetshah.com/mixes/mix.html?mix=65

有谁知道为什么拖动处理程序在第一次尝试拖动手柄时没有响应？

Answer 1

查看函数positionNobDragged(event)，有一些错误。

而不是这个...

const x = event.x - positionBar.offsetLeft;

用它来处理负值...

const x = Math.max(event.x,positionBar.offsetLeft)-Math.min(event.x,positionBar.offsetLeft);

因为如果你只拖动一点它就会比 offsetLeft 小。

这里又是一个嘘声......

positionNob.style.left = x;

应该是...

positionNob.style.left = x + positionBar.offsetLeft;

你必须把这个偏移量放回到方程中，就像你之前把它拿走一样！

我认为它在第一次拖动时不愿意移动，因为会产生负值。