当拖动图像的中心超过放置目标时做出反应

时间:2019-03-31 19:08:11

标签: javascript reactjs react-dnd

在React DND中,当鼠标位于放置目标上方时,hover会触发。当拖动图像的中心位于放置目标上方时,我需要触发一个事件:

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

如果m是鼠标的位置,则hover不会触发,直到两个元素几乎重叠。为了使c(中心)在元素上方时触发事件,我在考虑两个想法:

  1. 在整个应用上触发hover时,请根据getSourceClientOffset加上元素尺寸的一半来计算中心坐标,然后使用elementFromPoint查找DOM节点并从在那里。

  2. 将放下的目标中的每个元素包装到足以触发hover的位置上,即使鼠标位于拖动图像的尖端。然后找到拖动图像的中心,看看它是否在实际元素的边界矩形上,因为现在目标将重叠。

两个想法都开始让我觉得我可能不在React DND的设计范围之内。有没有更自然的方法可以与HTML5和触摸后端配合使用?

0 个答案:

没有答案