CODEWITHSUNDEEP
javascriptjqueryjquery-ui
ps0604
ps0604

Reputation: 1071

Get top/left coordinates of element being dragged (not pointer)

I have this jQuery UI draggable element:

<span id="dragme">Rectangle</span>

When I drop this element in a droppable div, I get the top/left coordinates like so:

 drop: (event, ui) => {
        const rect = event.target.getBoundingClientRect();
        const top = event.clientY - rect.top;
        const left = event.clientX - rect.left;
 }

This works fine, but the problem is that the top/left coordinates that I get are the mouse pointer coordinates and I need the top/left of the element that is being dragged:

enter image description here

How can this be achieved?

Upvotes: 2

Views: 847

Answers (1)

P. Frank
P. Frank

Reputation: 5745

You can use offset() for get the exact position.

drop: (event, ui) => {
        const rect = event.target.getBoundingClientRect();
        const top = $("#dragme").offset().top;
        const left = $("#dragme").offset().left;
 }

Upvotes: 1

Related Questions