javascriptjquerycss

Change "offsetParent" of element to get position relative to it's closest parent?

I use jQuery "draggable" & "droppable" to move elements from one div to another.

When I drop the elements into "droppable" I'd like to store the new position. I can do this with: $('draggedElement').position() Only problem is that I will get the position relative to the "offsetparent" which is "body". I'd like it to be relative to the dropzone.

Is it possible to change "offsetparent", or do I need to calculate the position somehow?

jQuery offsetparent(); accepts no arguments.

FIDDLE
https://jsfiddle.net/0apuqnxd/4/

Solution

  • The documentation for offsetParent (https://api.jquery.com/offsetParent/) says the following:

    Description: Get the closest ancestor element that is positioned.

    You need to apply a position definition to the parent you are trying to offset against.

    <div id="parent" style="position: relative;">
   <div id="draggedElement"></div>
</div>

    Update:

    Now you've provided a fiddle we can see that your draggable elements aren't children of the elements your dropping them into. So you have to do some maths to calculate the position. In pseudo code:

    droppedPosition - (elementDroppedInto - draggableParent)