需要焕然一新。
我在react中实现拖放（不是HTML可拖动，通过mouseup / mousemove），我想在拖动活动元素时进行交互式排序（类似于beautiful-dnd，react-dnd），但在确定的那一刻卡住了在 mousemove 事件期间，活动元素 (DragItem) 相对于放置元素和非活动 DragItem 元素的位置。
一般逻辑如下：
- 有几个 DragItem（可以移动的项目）
- 一旦开始拖动，就会在文档的根部创建一个门户 (DragPortal)。
- DragPortal 依次创建 mousemove 和 mouseup 事件以更改活动 DragItem 的位置。
在所有已知选项中，只有 document.elementFromPoint 浮现在脑海中，但这个解决方案似乎很笨拙，因为 您必须偏离反应逻辑，特别是隐藏活动元素以搜索其下的元素（参见下面的示例）。
handleMouseMove({ clientX, clientY, target }) {
target.style.display = "none"; //именно это мне не нравится.
console.log(document.elementFromPoint(clientX, clientY));
target.style.display = "block";
}
我不想偏离react的逻辑，也许你能告诉我一些新鲜的想法？
所有代码都可以在codesandbox中查看
在某处（例如在上下文中）通过 注册所有元素，通过 muv 或 frame
ref调用所有元素，进行比较。element.getBoundingClientRect()您可以记住拖动开始时相对于 DragItem 的光标偏移量，然后使用它。