使javascript动画平滑？

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

功能鼠标移动（e）{
e、 预防默认值（）；
log（“鼠标移动”）；
如果（isMouseDown>0&¤tElement）{
mouseX=e.clientX；
穆西=e.clientY；
var diffX=mouseX-lastMouseX；
var diffY=mouseY-lastMouseY；
如果（diffX+lastElementX+elementWidthleftLimit）{
lastElementX+=diffX；
lastMouseX=鼠标；
} 
if（diffY+lastElementY+elementHeighttopLimit）{
lastElementY+=diffY；
拉斯穆西=穆西；
}                           
setCurrentElementPosition（lastElementX，lastElementY）；
}                                                         
}

---

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

这是我给你的解决方案，我以前编写过视频游戏，你经常遇到这个问题

你在检查它是否能出去，但如果能出去就什么也不做！如果它出去了，你必须把它设置到边缘

var lastElementX=0//元素的最后X位置
var lastElementY=0//元素的最后Y位置
var-lastMouseX=0//鼠标的最后X位置
var lastMouseY=0//鼠标的最后Y位置
var-mouseX=0//当前鼠标位置X
var-mouseY=0//当前鼠标位置Y
var currentElement=null//当前选定的分区
var-elementWidth=0；
var-elementHeight=0；
var容器=null//货柜组
var isMouseDown=0//如果大于零，则鼠标按下
//货柜限额
var bottomLimit=0；
var topLimit=0；
var leftLimit=0；
var rightLimit=0；
函数init（）{
container=document.getElementsByClassName（“container”）[0]；
topLimit=container.getBoundingClientRect（）.top；
bottomLimit=container.getBoundingClientRect（）.bottom；
leftLimit=container.getBoundingClientRect（）.left；
rightLimit=container.getBoundingClientRect（）.right；
文档.添加的EventListener（“mousedown”，函数mousedown（e）{
e、 预防默认值（）；
++isMouseDown；
文件。添加了文件列表（“mousemove”，mousemove）；
setCurrentElement（getElementUnderMouse（e））；//设置当前元素
currentElement.style.position=“绝对”；
lastElementX=currentElement.getBoundingClientRect（）.left；
lastElementY=currentElement.getBoundingClientRect（）.top；
lastMouseX=e.clientX；
lastMouseY=e.clientY；
});
文件.添加的文件列表器（“mouseup”，函数mouseup（e）{
e、 预防默认值（）；
--isMouseDown；
setCurrentElement（空）；
document.removeEventListener（“mousemove”，mousemove）；
});
}
函数mouseMove（e）{
e、 预防默认值（）；
log（“鼠标移动”）；
//报告（e）；
如果（isMouseDown>0&¤tElement）{
mouseX=e.clientX；
穆西=e.clientY；
var diffX=mouseX-lastMouseX；
var diffY=mouseY-lastMouseY；
如果（diffX+lastElementX+elementWidthleftLimit）{
lastElementX+=diffX；
}否则{
//如果没有此选项，位置将根本不会更新：
//检查它是否会偏离右边缘，设置为右边缘
如果（diffX+lastElementX+elementWidth>=rightLimit）{
lastElementX=rightLimit-elementWidth；
}
//检查它是否会离开左边缘，设置为左边缘
if（diffX+lastElementX topLimit）{
lastElementY+=diffY；
}否则{
//如果没有此选项，位置将根本不会更新：
//检查它是否会离开底部边缘，设置为底部边缘
if（diffY+lastElementY+elementHeight>=底部极限）{
lastElementY=底部极限-元素高度；
}
//检查它是否会离开顶部边缘，设置为顶部边缘
if（diffY+lastElementY-1；
}
函数getElementUnderMouse（e）{
var x=e.clientX；
变量y=e.clientY；
返回文件。元素起始点（x，y）；
}
功能报告（e）{
console.log（“isMouseDown:+isMouseDown”）；
console.log（“mouseX:+e.clientX”）；
console.log（“mouseY:+e.clientY”）；
日志（“currentElement:+currentElement”）；
log（“currentElement顶部：+currentElement.getBoundingClientRect（）.top”）；
log（“currentElement底部：+currentElement.getBoundingClientRect（）.bottom”）；
log（“容器顶部：+container.getBoundingClientRect（）.top”）；
log（“容器底部：+container.getBoundingClientRect（）.bottom”）；
}
init（）；

---

编辑：不确定为什么它在右边和底部缺少一个像素，你必须在前面做一些调查。似乎它没有考虑到边界，尽管你使用了

offsetWidth

。祝你好运！

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

//在onmousedown中
offsetX=e.clientX-lastElementX；
offsetY=e.clientY-lastElementY；
//搬家
var newElementX=mouseX-offsetX；
var newElementY=mouseY-offsetY；
如果（newElementX+elementWidth>=rightLimit-1）newElementX=rightLimit-elementWidth-2；
如果（newElementX=bottomLimit-1）新元素
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);                              
    }                                                         
}

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();

// 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);