getBoundingClientRect无法正常工作

Question

我正在使用反应拖动进行简单的拖放功能，但同时拖动时我想要获得顶部，左侧，右侧，底部轴。我正在使用getBoundingClientRect但是这个函数在拖动元素时发出相同的值。

  handleOnDrag(e,id){




        const {left,right,top,bottom} = document.getElementById('drag').getBoundingClientRect()

        let payload = {
            left:left,
            right:right,
            top:top,
            bottom:bottom

        }
        console.log(payload) //same while dragging

    }

     return (
                // currentImageUrl

                <div id="drag"  onDrag={(e,data) => this.handleOnDrag(e,data,id)}  key={data.get('id')} style={{position:'absolute',transition:'0.2s',zIndex:'1px',display:'block'}} className="img">
                            <Draggable    key={i}  >

                                        <img style={{height:data.get('height')/heightWidth,width:data.get('width')/heightWidth}}  src={currentImageUrl} alt=""/>
                            </Draggable>

                        </div>
        )

请帮忙。谢谢。