title: jQuery use sort after drag and drop?
body: <p>I am just newbie to the jQuery UI. I have two divs. One in the left side and another one in the right side. I want that when I will drag one element from left div to right div it should sort both left and right divs. So can someone kindly tell me how to do this?
   Here is my code for so far</p>
  
  <pre><code>&lt;div name="list-a" class="droppable"&gt;
    &lt;h3&gt;List A&lt;/h3&gt;
    &lt;div class="task-wrapper"&gt;
        &lt;div class="draggable" id="1" name="1"&gt;
            &lt;a href="#"&gt;Element 1&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="draggable" id="2" name="3"&gt;
            &lt;a href="#"&gt;Element 2&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="draggable" id="3" name="3"&gt;
            &lt;a href="#"&gt;Element 3&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div name="list-b" class="droppable"&gt;
    &lt;h3&gt;List B&lt;/h3&gt;
    &lt;div class="task-wrapper"&gt;
        &lt;div class="draggable" id="5" name="5"&gt;
            &lt;a href="#"&gt;Element 5&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="draggable" id="6" name="6"&gt;
            &lt;a href="#"&gt;Element 6&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the jQuery code is here</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery(function() {
    jQuery(".draggable").draggable();
    jQuery(".droppable").droppable({
      drop: function(event, ui) {
        var id, state;
        state = $(this).attr("name");
        id = $(this).closest(".droppable").attr("id");
        alert("Belongs to list: " + state);
      }
   });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the working <a href="http://jsfiddle.net/NewUserFiddle/B2DFG/" rel="nofollow">fiddle</a>. </p>
  
  <p>Here you can see it is doing both drag and drop but its not doing sorting after drag and drop.
  Any suggestion or help will be really appreciable.</p>