如何限制可拖動區域？ 它在頂部和左側起作用，但在右側和底部不起作用

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 會出現故障。 They only stop on the right side and bottom when the text inside them is selected.

Answer 1

有一個拖放庫，具有限制可拖動對象移動的功能

https://github.com/dragee/dragee

默認情況下，它限制container內元素的移動。 它考慮了元素的大小。

import { Draggable } from 'dragee'
new Draggable(element, { container: document.body })

同時可以使用自定義綁定 function

import { Draggable, BoundToRectangle, Rectangle } from 'dragee'
new Draggable(element, { 
    bound: BoundToRectangle.bounding(Rectangle.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
  }
}

您可以通過以下方式計算元素的大小：

let width = parseInt(window.getComputedStyle(element)['width'])
let height = parseInt(window.getComputedStyle(element)['height'])

我還可以建議將translate3d屬性用於移動而不是位置 left 和 top，因為它更有效

Answer 2

我假設由於可拖動項目是一個 dom 元素，它會在向右或向下移動時推動主體的寬度和高度，這會改變主體大小，因此使用主體大小可能不是正確的方法。 也許您可以使用window.width和window.height左右來限制可拖動項目無法更改的值的區域。 希望這可以幫助。

Answer 3

謝謝，我試試！ 我希望它有效