Drag & drop with react

Question

I'm using react-draggable to implement drag and drop feature.

I have to drag a component (A) inside another (B): how can I get final A position related to B?

Answer 1

calculate the position of each related to the screen and compare

const aRect = a.getBoundingClientRect();
const bRect = b.getBoundingClientRect();

if(aRect.right > bRect.right) {
    // a start after b
}
if(aRect.top > bRect.top) {
   // a start under b
}

// etc.

Answer 2

you can get the position of the componet A by getting the transform and translate property using document.getElementById('') and get the transform and translate. you need to make a function which will be fetching the css onDrag for the draggable.