Question

我正在用纯JS组合一个自定义UI控件，以模拟事件的时间表。一个事件由可拖动的div表示。

以下是最相关的JS函数：

function onDrag(event)
{
    console.log("**** DRAG ****");

    if (dragging)
    {
        console.log("dragging = " + dragging);

        //event.preventDefault();

        currentY = event.clientY - initialY;

        // Check whether we need to scroll up or down

        //handleScroll();

        // Limit dragging to size of background container

        if(currentY < 0)
        {
            currentY = 0;
        }
        else if(currentY > background_height - draggable.offsetHeight)
        {
            currentY = background_height - draggable.offsetHeight;
        }
        else
        {
            currentY = currentY;
        }

        yOffset = currentY;

        moveIt(currentY);
    }
}

function moveIt(yPos)
{
    console.log("moveIt : yPos = " + yPos);

    draggable.style.transform = "translate3d( 0px, " + yPos + "px, 0)";
}

JSFiddle here

一切基本都能正常工作，但并不奇怪，它没有我希望的那么干净。

当拖动到父容器的底部时，该容器应自动滚动。在实践中，可拖动div跟随鼠标直到我拖动到容器下方，这时，可拖动div向上反弹大约300像素，并将其自身朝向容器中间（通常部分或完全移出视口）。

我想要的是即使我试图将其拖动到1000px之外，也将其拖动到父容器的边缘。如果我非常缓慢地移动鼠标，则容器会正确滚动，并且可拖动的对象将停止在边缘上，但是如果我草率地拖动并拖过边缘（正如我预期的大多数用户会做的那样），则会出现反弹。

描述反弹的示例控制台日志：

**** DRAG ****
dragging = true
moveIt : yPos = 712
**** DRAG LEAVE ****
**** DRAG ****
dragging = true
moveIt : yPos = 713
**** DRAG ****
dragging = true
moveIt : yPos = 713
**** DRAG ****
dragging = true
moveIt : yPos = 415

我可以从HTML5拖放切换到使用MouseEvent驱动的样式，只需注释掉拖放侦听器并替换鼠标事件来避免这种弹跳效果。事情以我希望的鼠标事件方式运行，这一事实向我表明，我遇到了HTML5 DnD中未记录的内容。我很高兴切换到此鼠标事件驱动的方法，但是随后我必须手动实现滚动，当我尝试滚动时，拖动的次数越多，鼠标指针的可拖动移动就越远。您可以编辑小提琴，注释掉DnD侦听器

我很高兴能找到DnD或鼠标事件方法的解决方案，但主要是我想知道是什么导致了这些奇怪的行为。我构建页面的方式有问题吗？ CSS搞砸了吗？是否存在一些导致这些问题的未记录（但也许是预期的）行为？

滚动容器中的可拖动div到达底部时反弹

0 个答案: