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

Posted 2023-05-08

【中文标题】如何限制可拖动区域？它在顶部和左侧起作用，但在右侧和底部不起作用

【英文标题】：How do I limit draggable area? it functions on top and left side, but not on the right side and bottom

【发布时间】：2020-02-26 21:26:28

【问题描述】：

所以我试图阻止 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.

【参考方案1】：

有一个拖放库，具有限制可拖动对象移动的功能

https://github.com/dragee/dragee

默认情况下，它限制container 内元素的移动。它考虑了元素的大小。

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

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

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 属性来代替左右位置，因为它更有效

【参考方案2】：

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