title: jquery nested sortable - how to get position and parent where node was dropped
body: <p>I m using the jquery add-in <a href="http://mjsarfatti.com/sandbox/nestedSortable/" rel="nofollow">nested Sortable</a> to re-sort a list.
  I was wonderhing how I can determine the parent and position where the node has been inserted into. </p>
  
  <p>My issue is that the serialize function always returns the status of the tree before I updated it. Thus when I move node 1 from position 2 to position 3 and afterwards call serialize it always returns the state of the tree it had before I moved the node.</p>
  
  <p>This is the issue with the build-in serialize functions and some other custom function I found: <a href="https://gist.github.com/1013977" rel="nofollow">serialize custom</a></p>
  
  <p>I m calling the serialize function at the end of the _mouseStop function. Seems as it is not the correct position to do this... Seems as the inner this holds the old state of the tree. Thus the question is probably how can I refresh it..!?</p>
  
  <pre><code>_mouseStop: function(event, noPropagation) {
      ......
      $.ui.sortable.prototype._mouseStop.apply(this, arguments);
      //custom code added
      var ret = this.serialize({startDepthCount: 0});
      console.log(ret);
  </code></pre>
  
  <p>Whereas when I call the serialize function from a button bound to the serialize function it works fine. </p>
  
  <p>The html structure is similar to the one used in the <a href="http://mjsarfatti.com/sandbox/nestedSortable/" rel="nofollow">tutorial</a>:</p>
  
  <pre><code>&lt;ol class="sortable"&gt;
          &lt;li id="list_1"&gt;&lt;div&gt;Item 1&lt;/div&gt;
              &lt;ol&gt;
                  &lt;li id="list_2"&gt;&lt;div&gt;Sub Item 1.1&lt;/div&gt;
                  &lt;li id="list_3"&gt;&lt;div&gt;Sub Item 1.2&lt;/div&gt;
              &lt;/ol&gt;
          &lt;li id="list_4" class="no-nest"&gt;&lt;div&gt;Item 2 (no-nesting)&lt;/div&gt;
          &lt;li id="list_5"&gt;&lt;div&gt;Item 3&lt;/div&gt;
              &lt;ol&gt;
                  &lt;li id="list_6" class="no-nest"&gt;&lt;div&gt;Sub Item 3.1 (no-nesting)&lt;/div&gt;
                  &lt;li id="list_7"&gt;&lt;div&gt;Sub Item 3.2&lt;/div&gt;
                      &lt;ol&gt;
                          &lt;li id="list_8"&gt;&lt;div&gt;Sub Item 3.2.1&lt;/div&gt;
                      &lt;/ol&gt;
              &lt;/ol&gt;
          &lt;li id="list_9"&gt;&lt;div&gt;Item 4&lt;/div&gt;
          &lt;li id="list_10"&gt;&lt;div&gt;Item 5&lt;/div&gt;
      &lt;/ol&gt;
  </code></pre>