如何在 javascript 中设置位置绝对元素的边界

Question

Fiddle。我正在创建一个带有可调整大小菜单的 chat/mail 应用程序。喜欢 google 视频群聊桌面应用程序。如果您以正常速度调整棕色内容窗格的大小，您可以看到边界按我的预期工作。我正在使用 style.left 和一个检查光标方向的函数，以使光标与拖动条保持一致。

错误： 在拖动条上按住鼠标时，尝试几次 "fling" 动作快速调整它的大小超出范围。它会强制执行，违反了控制器的规则。

编辑： 该错误在 Edge 和 firefox 中的攻击性要小得多。它不会出现在右侧，它只会偶尔出现在左侧，但不会离开屏幕。

这是我的视图控制器代码，来自 fiddle。

//handles all mousemove and boundary cases.
mouseMove(e) {
    //size of right pane relative to container (percent)
    let percentRight = Math.round(this.messageWindowContentContainer.clientWidth/this.chatContainer.clientWidth * 100);
    //normal mousemove within the bounds min:25 and max:94
    if ((percentRight) <= 94 && percentRight >= 25) {
    document.getElementById("content2").innerHTML = "Content";
    this.messageWindowContainer.setAttribute("style", "left:" + (e.clientX) + "px");

}
//Only moves if right pane is out of bounds(left), mouse if moving right, and mouse is right of pane
if (percentRight > 94 && this.getCursorXPercentage(e) >= 6 && this.cursorMovingRight(e)) {
    this.messageWindowContainer.setAttribute("style", "left:" + (e.clientX) + "px");
}
//Only moves if right pane is out of bounds (right), mouse is moving left, and mouse is left of pane
if (percentRight < 25 && this.getCursorXPercentage(e) <= 75 && this.cursorMovingLeft(e)) {
    this.messageWindowContainer.setAttribute("style", "left:" + (e.clientX) + "px");
}
}

//if e.movementX is positive, moving right
cursorMovingRight(e) {
    return (Math.sign(e.movementX) === 1)
}
//if e.movementX is negative, moving left
cursorMovingLeft(e) {
    return (Math.sign(e.movementX) === -1)
}

//returns cursor location relative to container as percent
getCursorXPercentage(e) {
    let percentage = Math.round((e.clientX / this.chatContainer.getBoundingClientRect().width) * 100)
    console.log(percentage)
    document.getElementById("content2").innerHTML = percentage;
    return percentage;
}

Answer 1

好的，所以我在我的计算机上试过了，我认为这是因为您正在测试 percentRight 的当前值，而不是测试 percentRight 的未来值。这意味着即使现值还可以，但未来值可能就不是这样了。如果您的 DIV 在全屏模式下，如示例中那样，则 percentLeft 的新值将是 e.clientX / widthOfTheBox 一旦您在分配新值之前必须执行以下操作：

 this.messageWindowContainer.style.left = Math.min(Math.max(newPercentLeft,5),75) * widthOfTheBox + 'px'

您可以通过编写 this.messageWindowContainer.style.left = yourvalue 而不是 setAttribute 来缩短代码。

编辑：https://jsfiddle.net/8kcc8822/16/

 mouseMove(e) {
        var [=11=] = document.querySelector.bind(document),
            boxWidth =  [=11=]('#mainMenuContainer').clientWidth,
            newPercentLeft = e.clientX / boxWidth,
            limitedNewPercentLeft = Math.min(Math.max(.2,newPercentLeft),.85)
        ;
        [=11=]("#content2").innerHTML = limitedNewPercentLeft != newPercentLeft ? (newPercentLeft * 100 |0) : 'content';
        this.messageWindowContainer.style.left = limitedNewPercentLeft * boxWidth + 'px'
        console.log(newPercentLeft);
    }

如何在 javascript 中设置位置绝对元素的边界

How to set boundaries for position absolute element in javascript

html

javascript

css

resize