title: How do I find the position of the draggable element relative to the droppable area
body: <p>I am using HTML5 native drag and drop.</p>
  
  <p>I am having problems finding the position of the draggable element relative to it's parent container.</p>
  
  <p><strong>Summary of Task</strong></p>
  
  <p>I have a "position: relative" div which I consider a 'droppable area'. Inside this div, I have several "position: absolute" image elements which I have marked as draggable. I want these images to be freely movable by the user.</p>
  
  <p>To set the position of the element I've a listener on the 'dragend'.</p>
  
  <p>The end top / left variables must be percentage based as opposed to pixel.</p>
  
  <p><strong>Current Attempt</strong></p>
  
  <p>Below you can see my attempt:</p>
  
  <pre><code>draggable.addEventListener('dragend', function (event) {
  event.preventDefault();
  
  //Gets the position of the two elements relative to the viewport
  var droppableBoundingRect = droppable.getBoundingClientRect();
  
  //Establishes the percentage using the droppable height and width
  var draggableXPercentage = ((event.clientX - droppableBoundingRect.left) / droppable.clientWidth) * 100;
  var draggableYPercentage = ((event.clientY - droppableBoundingRect.top) / droppable.clientHeight) * 100;
  
  //Set the positional elements of the draggable element
  event.target.style.top = draggableYPercentage + "%";
  event.target.style.left = draggableXPercentage + "%";
  }, false);
  </code></pre>
  
  <p>And here's a JSFiddle of what I was hoping to work, with comments showing what I was expecting each segment to do:</p>
  
  <p><a href="https://jsfiddle.net/oL8yd9Lr/" rel="nofollow">https://jsfiddle.net/oL8yd9Lr/</a></p>
  
  <p>Perhaps I'm looking up the wrong tree, in the wrong forest. I'd appreciate any guidance.</p>