CODEWITHSUNDEEP
javascriptreactjsdrag-and-drop
Luca Davanzo
Luca Davanzo

Reputation: 21528

Drag & drop with react

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?

Upvotes: 1

Views: 249

Answers (2)

Gopal Oswal
Gopal Oswal

Reputation: 174

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.

Upvotes: 0

Yosef Tukachinsky
Yosef Tukachinsky

Reputation: 5895

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.

Upvotes: 2

Related Questions