I’m building a web-app that will allow users to drag and drop from a static set of 30 draggable elements onto a droppable canvas. I want to record the draggable elements positions inside the droppable div with x & y offsets from the top left corner.
My current strategy for doing this is to first use .offset() to record the x&y position of the droppable div and then subtract this from the .offset() returned by the draggable element that was dropped to get the position from top left corner of the droppable. I will then convert my X & Y values into percentages of the width and height of the box.
Is there a better way of doing this? Will I run into problems later when I try and display saved sets of elements with positions inside the div? Thanks!
I think as long as you also save the height, width of the box then it can be reconstructed as you have all the required data to do so.