作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我遇到与屏幕区域重叠的可拖动元素的问题。这是代码示例:
onDrag(pageX: number, pageY: number) {
if (this.isDragging) {
const deltaX = pageX - this.lastPageX;
const deltaY = pageY - this.lastPageY;
const coords = this.element.nativeElement.getBoundingClientRect();
this.element.nativeElement.style.left = `${coords.left + deltaX}px`;
this.element.nativeElement.style.top = `${coords.top + deltaY}px`;
this.lastPageX = pageX;
this.lastPageY = pageY;
}
}
我真正想要的是,当 element
到达屏幕时,它应该是 left: 0;
或等样式。
这是一个stack 。我究竟做错了什么 ?
最佳答案
您可以将这些行添加到您的 onDrag
函数中:
if(coords.left + deltaX > 0 && coords.right + deltaX < window.innerWidth) {
this.element.nativeElement.style.left = `${coords.left + deltaX}px`;
}
if (coords.top + deltaY > 0 && coords.bottom + deltaY < window.innerHeight) {
this.element.nativeElement.style.top = `${coords.top + deltaY}px`;
}
关于javascript - 可拖动的 div 应避免 x 和 y 重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58590413/
我是一名优秀的程序员,十分优秀!