Как получить координаты в изображении для позиции курсора?

#html #typescript #angular5 #ngdraggable

#HTML #машинописный текст #angular5 #ngдраггируемый

Вопрос:

Это похоже на размещение разных блюд на обеденном столе. У меня есть изображение (таблица), и мне нужно перетащить и разместить другие мелкие объекты (div) поверх изображения. Мне нужно получить координаты в процентах от размера изображения (таблицы). Я даже не знаю, какое именно событие следует использовать. Пожалуйста, помогите.

 <div class="col-lg-12 col-md-12 col-sm-12 mrg-btm-zero">

     <!-- TODO: Change number of dishes w.r.t table name selection-->
     <div ngDraggable [handle]="dishA" class="mrg-right-10 float-left">
          <div #DishA class="dishes"></div>
     </div>
     <div ngDraggable [handle]="dishB" class="mrg-right-10 float-left">
          <div #DishB class="dishes"></div>
     </div>
     <div ngDraggable [handle]="dishC" class="mrg-right-10 float-left">
          <div #DishC class="dishes"></div>
     </div>

     <div class="Dinetable">
          <!-- TODO: Change table image w.r.t table name selection-->
          <img src="../../../../../assets/images/tableType1.png" />
     </div>

 </div>
 

у меня есть эта ссылка. Но не знаю, как использовать его в typescript. Также мне нужен процент координат с адаптивной страницы.

Комментарии:

1. Тем не менее, у меня нет решения. Пожалуйста, помогите

2. Есть ли какой-либо сторонний элемент управления для обработки такого изображения?