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

因此，我试图阻止

可拖动的

内容从

溢出

正文

它在顶部和左侧工作

我不能限制右侧和底部

            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";
        }
    });
};

e.pageX-=e.offsetX；
e、 pageY-=e.offsetY；
//左/右约束
如果（e.pageX-dragoffset.x<0）{
offsetX=0；
}else if（e.pageX+dragoffset.x>document.body.clientWidth）{
offsetX=document.body.clientWidth-e.target.clientWidth；
}否则{
offsetX=e.pageX-dragoffset.x；
}
//上/下约束
if（e.pageY-dragoffset.y<0）{
offsetY=0；
}else if（e.pageY+dragoffset.y>document.body.clientHeight）{
offsetY=document.body.clientHeight-e.target.clientHeight；
}否则{
offsetY=e.pageY-dragoffset.y；
}   
el.style.top=offsetY+“px”；
el.style.left=偏移量x+“px”；
}
});
};

---

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

我假设，由于可拖动项是一个dom元素，它将在向右或向下移动时推动主体的宽度和高度，这会更改主体大小，因此使用主体大小可能不是正确的方法。也许您可以使用

window.width

和

window.height

等来限制可拖动项不能更改的值的区域。希望这能有所帮助。

有一个拖放库，具有限制拖拽物移动的功能

默认情况下，它限制元素在

容器中的移动。它考虑了元素的大小

从'dragee'导入{Draggable}
新的可拖动（元素，{container:document.body}）

同时，可以使用自定义绑定函数

从'dragee'导入{Draggable，BoundToRectangle，Rectangle}
新的可拖动（元素，{
绑定：BoundToRectangle.bounding（矩形.fromElement（document.body，document.body））
})

其中
BoundToElement
描述您需要的限制

class BoundToRectangle {
  constructor(rectangle) {
    this.rectangle = rectangle
  }

  bound(point, size) {
    const calcPoint = point.clone()
    const rectP2 = this.rectangle.getP3()

    if (this.rectangle.position.x > calcPoint.x) {
      (calcPoint.x = this.rectangle.position.x)
    }
    if (this.rectangle.position.y > calcPoint.y) {
      calcPoint.y = this.rectangle.position.y
    }
    if (rectP2.x < calcPoint.x + size.x) {
      calcPoint.x = rectP2.x - size.x
    }
    if (rectP2.y < calcPoint.y + size.y) {
      calcPoint.y = rectP2.y - size.y
    }

    return calcPoint
  }
}

我还可以建议对移动使用
translate3d
属性，而不是左上方的位置，因为这样更有效