2

I am making a simple drag and drop functionality using react draggable but at the same time while dragging I want to get the top,left,right,bottom axis. I am using getBoundingClientRect But this function emitting same value while element is dragged.

  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>
        )

Please help. Thanks.

Naeem Ul Wahhab
  • 2,465
  • 4
  • 32
  • 59
Nane
  • 2,370
  • 6
  • 34
  • 74
  • 1
    The problem has little to do with react, while the solution may need more react knowledge than I got. While you are dragging it, the element is still in the same position in the DOM. The ghost image you see is just a ghost image, and can actually be set to whatever you'd like. You can get the current mouse position in the dragover event itself (`clientX`, `clientY`) and from then calculate the boundingBox of the ghost. – Kaiido Jul 30 '17 at 06:45
  • is there any formula to calculate the top,left,right,bottom from clientX,clientY that would be more appreciated. – Nane Jul 30 '17 at 06:50
  • 1
    It all depends on what's the image you did [set](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage) if none, it can be `{left: evt.clientX - element_rect.width / 2, top: evt.clientY - element_rect.height /2 ... }` https://jsfiddle.net/a9kev14s/ But there is a long delay between dragover events... – Kaiido Jul 30 '17 at 07:10

0 Answers0