title: jquery sortable getting changed dom items and sending ajax call
body: <p>I have a sortable list of div's across multiple columns this <a href="http://jsfiddle.net/2bitcoder/h5rt2qgw/13/" rel="nofollow">jsfiddle link</a> has the demo. I can do the ajax call just fine,  I've added the update event to catch changes. </p>
  
  <pre><code>   update: function(event, ui) {
             // $.post('/reorder', $(selector).sortable('serialize'))
              //    .done(function() {
              //        alert('Updated')
            //    });
            //console.log($("#ready").sortable("serialize", { key: "sort" }));
          }
  </code></pre>
  
  <p>I just have no idea how I then get the id from each div container that has changed DOM position for a particular column. I've written the id number I need for the database update to the todo-task id property. The ajax call would need to be for each id number.</p>
  
  <pre><code> &lt;div class="task-list task-container ui-droppable ui-sortable ui-state-highlight" id="ready"&gt;
      &lt;h3 class="ui-sortable-handle"&gt;Ready&lt;/h3&gt;        
  &lt;div style="position: relative;" id="5329" class="todo-task ui-draggable-handle ui-sortable-handle"&gt;&lt;div class="task-header"&gt;&lt;div class="task-no"&gt;5329&lt;/div&gt;&lt;div class="task-type"&gt;WBS&lt;/div&gt;&lt;/div&gt;&lt;div class="task-body"&gt;&lt;div class="task-title"&gt;New task&lt;/div&gt;&lt;/div&gt;&lt;div class="task-footer"&gt;&lt;div class="task-date"&gt;Due: 20/03/2015&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style="width: 277px; right: auto; height: 85px; bottom: auto; opacity: 1;" id="5327" class="todo-task ui-draggable-handle ui-sortable-handle"&gt;&lt;div class="task-header"&gt;&lt;div class="task-no"&gt;5327&lt;/div&gt;&lt;div class="task-type"&gt;WBS&lt;/div&gt;&lt;/div&gt;&lt;div class="task-body"&gt;&lt;div class="task-title"&gt;Hand over to operations&lt;/div&gt;&lt;/div&gt;&lt;div class="task-footer"&gt;&lt;div class="task-date"&gt;Due: 01/10/2015&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style="position: relative;" id="839" class="todo-task ui-draggable-handle ui-sortable-handle"&gt;&lt;div class="task-header"&gt;&lt;div class="task-no"&gt;839&lt;/div&gt;&lt;div class="task-type"&gt;Issue&lt;/div&gt;&lt;/div&gt;&lt;div class="task-body"&gt;&lt;div class="task-title"&gt;Demo Issue&lt;/div&gt;&lt;/div&gt;&lt;div class="task-footer"&gt;&lt;div class="task-date"&gt;Due: 28/01/2014&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style="position: relative;" id="841" class="todo-task ui-draggable-handle ui-sortable-handle"&gt;&lt;div class="task-header"&gt;&lt;div class="task-no"&gt;841&lt;/div&gt;&lt;div class="task-type"&gt;Issue&lt;/div&gt;&lt;/div&gt;&lt;div class="task-body"&gt;&lt;div class="task-title"&gt;New Issue 1&lt;/div&gt;&lt;/div&gt;&lt;div class="task-footer"&gt;&lt;div class="task-date"&gt;Due: 22/08/2014&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I've seen other try and use serialize, but that doesn't seem to give me any result.</p>
  
  <p>Any help appreciated..</p>