title: I need to post the co-ordinate populated from drag and drop
body: <p>I am able to populate the co-ordinates for each element I cant figure out how to play around with jquery $(this) or each to be able to post the co-ordinates of each list box. Some one point me to the right direction am a little lost here.</p>
  
  <p>My HTML</p>
  
  <pre><code> &lt;div id = "container" &gt;
          &lt;ul&gt;
              &lt;li id="" class="ui-state-highlight items"&gt;First name&lt;/li&gt;
              &lt;li id="" class="ui-state-highlight items"&gt;Middle name&lt;/li&gt;
              &lt;li id="" class="ui-state-highlight items"&gt;Event name&lt;div id ="posX"&gt;&lt;/div&gt;&lt;div id ="posY"&gt;&lt;/div&gt;&lt;/li&gt;
              &lt;li id="" class="ui-state-highlight items"&gt;Logo&lt;div id ="posX"&gt;&lt;/div&gt;&lt;div id ="posY"&gt;&lt;/div&gt;&lt;/li&gt;
              &lt;li id="" class="ui-state-highlight items"&gt;Footer&lt;div id ="posX"&gt;&lt;/div&gt;&lt;div id ="posY"&gt;&lt;/div&gt;&lt;/li&gt;
          &lt;/ul&gt; 
      &lt;/div&gt;
  </code></pre>
  
  <p>My javascript
           </p>
  
  <pre><code>        $('.items').draggable({
              containment: '#container',
              cursor: 'move',
              drag: function() {
                  var offset = $(this).offset();
                  var xPos = offset.left;
                  var yPos = offset.top;
                  $(this).text('X : ' + xPos + ' y: ' + yPos);
              }
  
          });
      &lt;/script&gt;
  </code></pre>