перетаскиваемый div должен избегать перекрытия x и y

Question

У меня проблема с перетаскиваемым элементом, который перекрывает область экрана. Вот пример кода:

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; или т. Д.

Вот стек . Что я делаю неправильно ?

Answer 1

Вы можете добавить эти строки в вашу 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`;
  }