Реагировать, когда центр перетаскивания изображения находится над мишенью

Question

В React DND, hover срабатывает, когда мышь находится над целью падения.Мне нужно событие, чтобы сработать, когда центр перетаскиваемого изображения находится над мишенью для перетаскивания:

+---------+
|m        |
|    c    |-----+
|         |     |
+---------+     |
      |         |
      +---------+

Если m - это расположение мыши, hover не будет срабатывать до тех пор, пока дваэлементы почти перекрываются.Чтобы запустить событие, когда c, центр, находится над элементом, я думаю о двух идеях:

1. Когда hover запускается в целомприложение, рассчитайте координаты центра из getSourceClientOffset плюс половина размеров элемента и используйте elementFromPoint, чтобы найти узел DOM и перейти оттуда.

2. Оберните каждый элемент в целевой объект, достаточно большой, чтобы выстрелить hover, даже если мышь находится на кончике перетаскиваемого изображения.Затем найдите центр перетаскиваемого изображения и посмотрите, находится ли он над ограничительным прямоугольником фактического элемента, поскольку теперь цели будут перекрываться.

Обе идеи начинают казаться, что я могунаходиться за рамками дизайна React DND.Есть ли более естественный способ добиться этого, который бы работал с HTML5 и сенсорным бэкэндом?