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

Question

Fiddle .我正在创建一个带有可调整大小菜单的聊天/邮件应用程序。就像谷歌环聊桌面应用程序。如果您以正常速度调整棕色内容 Pane 的大小，您可以看到边界按我的预期工作。我正在使用 style.left 和一个检查光标方向的函数，以便将光标保持在拖动条上。

错误:在拖动条上按住鼠标时，尝试通过多次“甩动” Action 将其快速调整到边界之外。它会违反 Controller 的规则。

编辑: 该错误在 Edge 和 firefox 中的攻击性要小得多。它不会出现在右侧，它只是有时出现在左侧，但永远不会离开屏幕。

这是来自 fiddle 的我的 View Controller 代码。

//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 的 future 值。这意味着即使现值还可以，但 future 值可能就不是这样了。如果您的 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 $0 = document.querySelector.bind(document),
            boxWidth =  $0('#mainMenuContainer').clientWidth,
            newPercentLeft = e.clientX / boxWidth,
            limitedNewPercentLeft = Math.min(Math.max(.2,newPercentLeft),.85)
        ;
        $0("#content2").innerHTML = limitedNewPercentLeft != newPercentLeft ? (newPercentLeft * 100 |0) : 'content';
        this.messageWindowContainer.style.left = limitedNewPercentLeft * boxWidth + 'px'
        console.log(newPercentLeft);
    }