title: Tracking and recording positions of draggable objects inside droppable div element - jQuery UI
body: <p>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 &amp; y offsets from the top left corner.</p>
  
  <p>My current strategy for doing this is to first use .offset() to record the x&amp;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 &amp; Y values into percentages of the width and height of the box.</p>
  
  <p>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!</p>