title: change two ul's lists position when drag and drop
body: <p>i have to do in such a way that  when i drag a list from ul <code>id[sortable1]</code> and drop on <code>li</code> of <code>ul id[sortable2]</code> both can change their place 
  I mean if i can drag a list from sortable 1 and drop to sortable 2 then sortable 2 list can placed in sortable 1 and sortable 1 list can placed in sortable 2</p>
  
  <p>For ex. if i can drag item1 and drop to item6 then item6 can place on item1 and item1 on item 6</p>
  
  <pre><code>    &lt;head&gt;
        &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
        &lt;script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;
  
        &lt;script&gt;
          $(function() {
            $( "#sortable1, #sortable2" ).sortable({
              connectWith: ".connectedSortable"
            }).disableSelection();
          });
        &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;ul id="sortable1" class="connectedSortable"&gt;
          &lt;li&gt;Item 1&lt;/li&gt;
          &lt;li&gt;Item 2&lt;/li&gt;
          &lt;li&gt;Item 3&lt;/li&gt;
          &lt;li&gt;Item 4&lt;/li&gt;
          &lt;li&gt;Item 5&lt;/li&gt;
        &lt;/ul&gt;
        &lt;ul id="sortable2" class="connectedSortable"&gt;
          &lt;li&gt;Item 6&lt;/li&gt;
          &lt;li&gt;Item 7&lt;/li&gt;
          &lt;li&gt;Item 8&lt;/li&gt;
          &lt;li&gt;Item 9&lt;/li&gt;
          &lt;li&gt;Item 10&lt;/li&gt;
        &lt;/ul&gt;
       &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>