title: Pass arguments or containing object to jQuery UI draggable events
body: <p>Say I have following code:</p>
  <pre><code>var mainObj = {
    area: $(&quot;#elementsArea&quot;),
    elements: [],
  
    addElement: function (x, y) {
      var newElement = $('&lt;div class=&quot;element&quot;&gt;&lt;/div&gt;');
      newElement.css(&quot;top&quot;, y);
      newElement.css(&quot;left&quot;, x);
      newElement.appendTo(this.area);
      this.elements.push( { id: this.elements.length, x: x, y: y } );
      newElement.dragabble({
        stop: function () {
          // What to do here?
        }
      });
    },
  
    updateElement: function ( element_id, x, y ) {
      // Find element in this.elements table table and update x, y
    },
  
    setup: function () {
      this.area.bind('click', this, function (e) {
        e.data.addElement( e.offsetX, e.offsetY );
      });
    }
  }
  
  $(document).ready( function () { mainObj.setup() } );
  </code></pre>
  <p>HTML, and CSS are irrelevant, other attributes and functions too. What I want to do is to somehow pass new position after draggable event stops to the <code>updateElement</code> method, so I can update object in <em>elements</em> table, similar to what I did with <em>click</em> event.</p>
  <p>How can I do it, or did I make something bad with code design?</p>