Расположите div в зависимости от положения мыши

Question

Мне нужно отобразить всплывающее окно, положение которого соответствует координатам нажатой мыши в угловых 4. Прекрасным примером было бы создание событий в календаре Google

Answer 1

В вашем HTML:

<div class="click-container" (click)="onMouseClick($event)"></div>

В вашем TS:

onMouseClick(e: MouseEvent) {
  console.log(e);
  //e.pageX will give you offset from left screen border
  //e.pageY will give you offset from top screen border

  //determine popup X and Y position to ensure it is not clipped by screen borders
  const popupHeight = 400, // hardcode these values
    popupWidth = 300;    // or compute them dynamically

  let popupXPosition,
      popupYPosition

  if(e.clientX + popupWidth > window.innerWidth){
      popupXPosition = e.pageX - popupWidth;
  }else{
      popupXPosition = e.pageX;
  }

  if(e.clientY + popupHeight > window.innerHeight){
      popupYPosition = e.pageY - popupHeight;
  }else{
      popupYPosition = e.pageY;
  }
}

Затем вам нужно инициализировать всплывающий компонент с соответствующим кодом.