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

24
October 22, 2019, at 1:50 PM

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:

How can this be achieved?

Answer 1

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;
 }
READ ALSO
How to verify if a certain value is present in a custom attribute using javascript or jquery?

How to verify if a certain value is present in a custom attribute using javascript or jquery?

Lets say we have a custom attribute named data-contentNow lets look for the html markup :

41
How to get element from innerHTML?

How to get element from innerHTML?

I am trying to access element from another element's innerHTMLI have this element:

38
&ldquo;Loading leaks&rdquo; on LeakCanary is really slow, what alternatives do I have?

“Loading leaks” on LeakCanary is really slow, what alternatives do I have?

Every time I want to look into a leak, I click on the notification of the leak and it takes a really long time to load, like enough time that I usually forget about it

34
Created object in React Native is moving on IOS but not Android

Created object in React Native is moving on IOS but not Android

I am new to react native and I'm having a little trouble getting the created ball object to move in androidThe code I have now properly moves the object by dragging it on the screen with one finger in IOS

49