我如何限制可拖动区域？它在顶部和左侧起作用，但不在右侧和底部起作用

Question

所以我试图阻止draggable正文中的overflowing内容。

它作品在顶部和左侧。

我不能限制右侧和底部。

            e.pageX -= e.offsetX;
            e.pageY -= e.offsetY;

            // left/right constraint
            if (e.pageX - dragoffset.x < 0) {
                offsetX = 0;
            } else if (e.pageX + dragoffset.x > document.body.clientWidth) {
                offsetX = document.body.clientWidth - e.target.clientWidth;
            } else {
                offsetX = e.pageX - dragoffset.x;
            }

            // top/bottom constraint

            if (e.pageY - dragoffset.y < 0) {
                offsetY = 0;
            } else if (e.pageY + dragoffset.y > document.body.clientHeight) {
                offsetY = document.body.clientHeight - e.target.clientHeight;
            } else {
                offsetY = e.pageY - dragoffset.y;
            }   

            el.style.top = offsetY + "px";
            el.style.left = offsetX + "px";
        }
    });
};

此外，我的div拖动时也变得glitchy。仅当选择其中的文本时，它们才在右侧和底部停止。

Answer 1

我假设由于可拖动项是dom元素，所以当向右或向下移动时，它将推动主体的宽度和高度，这会改变主体的大小，因此使用主体的大小可能不是正确的方法。也许您可以使用window.width和window.height左右限制可拖动项目无法更改的值的区域。希望这会有所帮助。