使JavaScript动画更加流畅？

Question

基本上，我想实现的是在另一个容器内拖动一些 div。当内部 div 到达容器 div 的边缘时，应该停止。我完成了大部分工作，但问题在于，如果我慢慢、小心地拖动内部 div，则会在边缘处停止，但如果我拖动得更快一些，有时它会溢出边缘或在边缘之前停止。这里的问题是什么？我该怎么做才能解决？这是完整的代码。

function mouseMove(e) {
    e.preventDefault();    
    console.log("mouse moving");     

    if(isMouseDown > 0 && currentElement) {   
        mouseX = e.clientX;        
        mouseY = e.clientY;

        var diffX = mouseX - lastMouseX;
        var diffY = mouseY - lastMouseY;         

        if(diffX + lastElementX + elementWidth < rightLimit && diffX + lastElementX > leftLimit) {
            lastElementX += diffX;
            lastMouseX = mouseX;
        } 

        if(diffY + lastElementY + elementHeight < bottomLimit && diffY + lastElementY > topLimit) {
            lastElementY += diffY;
            lastMouseY = mouseY;                
        }                           

        setCurrentElementPosition(lastElementX, lastElementY);                              
    }                                                         
}

上述代码在鼠标移动事件上运行，改变内部div的位置。

- Odgiiv

Answer 1

这是我的解决方案，我之前编写过视频游戏，你会经常遇到这个问题。你正在检查它是否会超出边界，但如果确实超出了，你却没有做任何事情！如果它超出了边界，你必须将其设置到边缘。https://jsfiddle.net/7btv7oqy/3/

var lastElementX = 0; //last X position of element
var lastElementY = 0; //last Y position of element
var lastMouseX = 0; //last X position of mouse
var lastMouseY = 0;//last Y position of mouse
var mouseX = 0; //current mouse position X
var mouseY = 0; //current mouse position Y

var currentElement = null; //currently selected div
var elementWidth = 0;
var elementHeight = 0;

var container = null; //container div
var isMouseDown = 0; //if greater than zero, mouse is down

//limits of container div
var bottomLimit = 0;
var topLimit = 0;
var leftLimit = 0;
var rightLimit = 0;

function init() {
    container = document.getElementsByClassName("container")[0];

    topLimit = container.getBoundingClientRect().top;
    bottomLimit = container.getBoundingClientRect().bottom;
    leftLimit = container.getBoundingClientRect().left;
    rightLimit = container.getBoundingClientRect().right;

    document.addEventListener("mousedown", function mouseDown(e) {
        e.preventDefault();
        ++isMouseDown;
        document.addEventListener("mousemove", mouseMove);

        setCurrentElement(getElementUnderMouse(e)); //set current element
        currentElement.style.position = "absolute";

        lastElementX = currentElement.getBoundingClientRect().left;
        lastElementY = currentElement.getBoundingClientRect().top;

        lastMouseX = e.clientX;
        lastMouseY = e.clientY;


    });

    document.addEventListener("mouseup", function mouseUp(e) {
        e.preventDefault();
        --isMouseDown;
        setCurrentElement(null);
        document.removeEventListener("mousemove", mouseMove);
    });

}

function mouseMove(e) {
    e.preventDefault();
    console.log("mouse moving");
    // report(e);

    if(isMouseDown > 0 && currentElement) {
        mouseX = e.clientX;
        mouseY = e.clientY;

        var diffX = mouseX - lastMouseX;
        var diffY = mouseY - lastMouseY;

        if(diffX + lastElementX + elementWidth < rightLimit && diffX + lastElementX > leftLimit) {
            lastElementX += diffX;
        } else {
            //without this, the location wouldn't update at all:

            //check if it would go off the right edge, set to right edge
            if (diffX + lastElementX + elementWidth >= rightLimit) {
                lastElementX = rightLimit - elementWidth;
            }

            //check if it would go off the left edge, set to left edge
            if(diffX + lastElementX <= leftLimit) {
                lastElementX = leftLimit;
            }

        }
        //this will always happen:
        lastMouseX = mouseX;

        if(diffY + lastElementY + elementHeight < bottomLimit && diffY + lastElementY > topLimit) {
            lastElementY += diffY;

        } else {
            //without this, the location wouldn't update at all:

            //check if it would go off the bottom edge, set to bottom edge
            if(diffY + lastElementY + elementHeight >= bottomLimit) {
                lastElementY = bottomLimit - elementHeight;
            }


            //check if it would go off the top edge, set to top edge
            if(diffY + lastElementY <= topLimit) {
                lastElementY = topLimit;
            }

        }

        //this will always happen:
        lastMouseY = mouseY;

        setCurrentElementPosition(lastElementX, lastElementY);
    }
}

function setCurrentElementPosition(left = null, top = null) {
    if(currentElement) {
        currentElement.style.top = top + 'px'
        currentElement.style.left = left + 'px';
    }
}

function setCurrentElement(element) {
    currentElement = element;
    if(element) {
        elementWidth = currentElement.offsetWidth;
        elementHeight = currentElement.offsetHeight;
    } else {
        elementWidth = 0;
        elementHeight = 0;
    }
}

function hasClass(element, cls) {
    return ("" + element.className + "").indexOf("" + cls + "") > -1;
}

function getElementUnderMouse(e) {
    var x = e.clientX;
    var y = e.clientY;
    return document.elementFromPoint(x, y);
}

function report(e) {
    console.log("isMouseDown: " + isMouseDown);
    console.log("mouseX: " + e.clientX);
    console.log("mouseY: " + e.clientY);
    console.log("currentElement: " + currentElement);
    console.log("currentElement top: " + currentElement.getBoundingClientRect().top);
    console.log("currentElement bottom: " + currentElement.getBoundingClientRect().bottom);
    console.log("container top: " + container.getBoundingClientRect().top);
    console.log("container bottom: " + container.getBoundingClientRect().bottom);
}

init();

编辑：不确定为什么右边和底部缺少一个像素，你需要在这方面进行一些调查。似乎它没有考虑边框，尽管你使用了offsetWidth。祝你好运！

- Sean Kendle

Answer 2

这是我的想法；我将元素的移动与diffX/diffY解耦：

https://jsfiddle.net/ttyrtjez/

// in onmousedown
offsetX = e.clientX - lastElementX;
offsetY = e.clientY - lastElementY;

// in onmousemove
var newElementX = mouseX - offsetX;
var newElementY = mouseY - offsetY;

if (newElementX + elementWidth >= rightLimit - 1) newElementX = rightLimit - elementWidth - 2;
if (newElementX < leftLimit) newElementX = leftLimit;
if (newElementY + elementHeight >= bottomLimit - 1) newElementY = bottomLimit - elementHeight - 2;
if (newElementY < topLimit) newElementY = topLimit;

setCurrentElementPosition(newElementX, newElementY);

- user5734311