title: JQuery UI drag & drop & re-order on multiple lists
body: <p>I currently have a single list working in which you can re-order the items and save the order into a MYSQL database.  I want them to be able to move between lists to as well but I cant figure out how to do it.</p>
  
  <p>I'm currently using the follow method to drag and drop multiple lists with JQuery UI.</p>
  
  <p>PHP
  a query to get the items and one for the groups they are in</p>
  
  <pre><code>function getGroup($groupID){
     $query_GroupNames = "SELECT * FROM EmProGroup WHERE idEmProGroup =    '".intval($groupID)."'";
    $GroupNames = mysql_query($query_GroupNames);
    $row_GroupNames = mysql_fetch_assoc($GroupNames);
  return $row_GroupNames['EmProGroupName'];
  }
  
  function getSections($sect){
     $query_sect = "SELECT * FROM EmProSect WHERE idEmProGroup = '".intval($sect)."' ORDER     BY EmProSectOrder ASC";
     $sect = mysql_query($query_sect);
   return $sect;
  
  }
  </code></pre>
  
  <p>PHP RE-ORDERING QUERY</p>
  
  <pre><code>foreach($_GET['item'] as $key=&gt;$value) {
    mysql_select_db($database_dbconnect, $dbconnect);
      mysql_query("UPDATE EmProSect SET EmProSectOrder='".intval($key)."' WHERE idEmProSect='".intval($value)."'", $dbconnect) or die (mysql_error());
    }
  </code></pre>
  
  <p>THEN THE HTML</p>
  
  <pre><code> &lt;div class="stages "&gt;
       &lt;h3&gt;&lt;?php echo getGroup(1);?&gt;&lt;/h3&gt;
       &lt;h3&gt; &lt;?php $list1 =  getSections(1); ?&gt;&lt;/h3&gt;
          &lt;ol class="stages-list" id="sortable1"&gt;
          &lt;?php do{ ?&gt;
             &lt;li id="item_&lt;?php echo $result['idEmProSect']; ?&gt; "&gt;
                 &lt;?php echo     $result['EmProSectName']; ?&gt;
             &lt;/li&gt;
          &lt;?php }while($result = mysql_fetch_assoc($list1));     mysql_data_seek($list1,0); ?&gt;
        &lt;/ol&gt;
   &lt;/div&gt;
  
  
   &lt;div class="stages "&gt;
     &lt;h3&gt;&lt;?php echo getGroup(2);?&gt;&lt;/h3&gt;
     &lt;h3&gt;
        &lt;?php $list2 =  getSections(2);?&gt;
    &lt;/h3&gt;
    &lt;ol class="stages-list" id="sortable2"&gt;
      &lt;?php do{ ?&gt;&lt;li id="item_&lt;?php echo $result['idEmProSect']; ?&gt; "&gt;&lt;?php echo $result['EmProSectName']; ?&gt;&lt;/li&gt;&lt;?php }while($result = mysql_fetch_assoc($list2)); ?&gt;
        &lt;/ol&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>THE JQUERY</p>
  
  <pre><code>  $(function() {
        $("#sortable1").sortable({
          opacity:0.6,
           stop: function(i) {
               $.ajax({
                  type: "GET",
                  url: "emproOrder.php",
                  data: $("#sortable1").sortable("serialize"),
                  success: $("#successorder").show().delay(1000).fadeOut('slow')});       
          }                                                       
      });
  
      $("#sortable1").disableSelection();
  });
  
      $(function() {
      $("#sortable2").sortable({
          opacity:0.6,
          stop: function(i) {
              $.ajax({
                  type: "GET",
                  url: "emproOrder.php",
                  data: $("#sortable2").sortable("serialize"),
                  success: $("#successorder").show().delay(1000).fadeOut('slow')});       
          }                                                       
      });
      $("#sortable2").disableSelection();
  });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/ajQRD.png" alt="the current layout"></p>