title: jQuery - get relative position and attribute of dropped elements
body: <p>I have draggable elements which can be dropped in droppable areas. If an element is dropped, the <code>drop</code> function is called:</p>
  
  <pre><code>$('#droppable').droppable({
      scope: "items",
      drop: function (event, ui) {
          // this one is called if an element is dropped in this droppable area
      }
  });
  </code></pre>
  
  <p>My draggable element:</p>
  
  <pre><code>&lt;div class="drag" data-noteid="10"&gt;Drag me&lt;/div&gt;
  ...
  $('.drag').draggable({
      revert: "invalid",
      scope: "items"
  });
  </code></pre>
  
  <p>What I need to know if the element is dropped is the value of <code>data-noteid</code> and the relative position of the droppable area. So, if the element is dropped on the upper left corner, the x/y coordinates must be 0/0.</p>
  
  <p>I created a full working example here: <a href="http://jsbin.com/utivo5/2/" rel="noreferrer">http://jsbin.com/utivo5/2/</a></p>
  
  <p>So normally I can access the attributes like this:</p>
  
  <pre><code>alert($(this).data("noteid"));
  
  alert($(this).position().top);
  alert($(this).position().left);
  </code></pre>
  
  <p>but all I get in this case is <code>undefined</code>.</p>
  
  <p>Do anyone know how I can access them? I think it must be possible with <code>event</code> or <code>ui</code> which is a parameter of the called <code>drop</code> function?!</p>
  
  <p>Thank you in advance &amp; Best Regards, Tim.</p>