React DND -在鼠标移动时获取拖动元素的坐标

import { DragSource } from 'react-dnd';

const itemSource = {
  beginDrag(props, monitor, component) {
    // 返回一个描述拖动数据的对象
    return { id: props.id };
  },
};

function DraggableItem(props) {
  const { connectDragSource } = props;
  return connectDragSource(
    <div>
      {/* 拖动元素的内容 */}
    </div>
  );
}

export default DragSource('item', itemSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
}))(DraggableItem);

import { useDrag } from 'react-dnd';

function DropTargetComponent() {
  const [collectedProps, drag] = useDrag({
    item: { type: 'item' },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
      clientOffset: monitor.getClientOffset(),
      initialClientOffset: monitor.getInitialClientOffset(),
    }),
  });

  // 在这里可以使用collectedProps中的坐标信息
  console.log(collectedProps.clientOffset);

  return (
    <div ref={drag}>
      {/* 放置拖动元素的区域 */}
    </div>
  );
}

export default DropTargetComponent;