![](/img/trans.png)
[英]How do I create 2d object collision from every side(top,left,bottom,right) properly
[英]How do I limit draggable area? it functions on top and left side, but not on the right side and bottom
所以我试图阻止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.
有一个拖放库,具有限制可拖动对象移动的功能
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,因为它更有效
我假设由于可拖动项目是一个 dom 元素,它会在向右或向下移动时推动主体的宽度和高度,这会改变主体大小,因此使用主体大小可能不是正确的方法。 也许您可以使用window.width
和window.height
左右来限制可拖动项目无法更改的值的区域。 希望这可以帮助。
谢谢,我试试! 我希望它有效
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.