如何获取动态子元素相对父元素的偏移量

Question

如图所示，父级div中有一个可拖拽运行的小球，现在要求小球只能在父级div中拖拽，请问如何获取运动过程中小球相对于div的偏移量呢？（如图中绿色部分所示）

其中，子元素小球是一个组件，引入到该页面中，渲染页面的大致代码为：

    return (
        <div id='父级div'>
            <Drag>
                <div style={{

                    width: '50px',
                    height: '50px',
                    borderRadius: '50%',
                    zIndex: 999,
                    backgroundColor: "red",
                }}
                />
            </Drag>
        </div>

    );

请问该偏移量该如何获取呢？

Answer 1

父级relative，子级absolute，然后子级设置left和top即可

Answer 2

父级relative，然后获取子元素的offsetTop和offsetLeft

Answer 3