[英]How do I limit draggable area? it functions on top and left side, but not on the right side and bottom
So I tried to block the draggable
contents from overflowing
the body.所以我试图阻止draggable
的内容overflowing
身体。
It works on top and on the left side.它适用于顶部和左侧。
I can't limit the right side and bottom.我不能限制右侧和底部。
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";
}
});
};
Also, my divs are getting glitchy while I drag them around.此外,当我拖动它们时,我的 div 会出现故障。 They only stop on the right side and bottom when the text inside them is selected. They only stop on the right side and bottom when the text inside them is selected.
There is drag&drop library with feature to restrict movements of draggables有一个拖放库,具有限制可拖动对象移动的功能
https://github.com/dragee/dragee https://github.com/dragee/dragee
By default it restrict movements of element inside container
.默认情况下,它限制container
内元素的移动。 It take into account size of element.它考虑了元素的大小。
import { Draggable } from 'dragee'
new Draggable(element, { container: document.body })
In same time it's possible to use custom bound function同时可以使用自定义绑定 function
import { Draggable, BoundToRectangle, Rectangle } from 'dragee'
new Draggable(element, {
bound: BoundToRectangle.bounding(Rectangle.fromElement(document.body, document.body))
})
where BoundToElement
describe restrictions that you need其中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
}
}
Size of element you can calculate next way:您可以通过以下方式计算元素的大小:
let width = parseInt(window.getComputedStyle(element)['width'])
let height = parseInt(window.getComputedStyle(element)['height'])
I can also suggest to use translate3d
property for movements instead of positions left and top, because it is more efficient我还可以建议将translate3d
属性用于移动而不是位置 left 和 top,因为它更有效
I assume that since the draggable item is a dom element it will push the width and height of the body when moved right or down, this changes the body size, so using the body size might not be the right way.我假设由于可拖动项目是一个 dom 元素,它会在向右或向下移动时推动主体的宽度和高度,这会改变主体大小,因此使用主体大小可能不是正确的方法。 Maybe you can use window.width
and window.height
or so to restrict the area with values the draggable item cannot change.也许您可以使用window.width
和window.height
左右来限制可拖动项目无法更改的值的区域。 Hope this helps.希望这可以帮助。
thank you, I'll try!谢谢,我试试! I hope it works我希望它有效
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.