title: How to get the position of a draggable object
body: <p>I'm trying to get the <code>x</code> and <code>y</code> of the draggable object using jQuery.</p>
  
  <p>The scenario is, I'm dragging and dropping an object onto another object and want to get the position of the drag &amp; drop object.</p>
  
  <p><strong><em>Edit: Now I can get the position of the object but I need more:</em></strong></p>
  
  <p>Here is what I've tried:</p>
  
  <pre><code>&lt;script&gt;
  $(function() {
      $('#draggable').draggable({
          drag: function() {
              var offset = $(this).offset();
              var xPos = offset.left;
              var yPos = offset.top;
              $(this).text('x: ' + xPos + 'y: ' + yPos);
          }
      });
  
      $("#droppable").droppable({
          drop: function(event, ui) {
              $(this)
                  .addClass("ui-state-highlight")
                  .find("p")
                  .html("Dropped!");
          }
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Now I can get the position of the draggable object but I need it to be resizable and in addition to getting <code>x,y</code> of the draggable, I also need the size of it.</p>