jQuery UI拖放并在多个列表上重新排序

Question

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.

I'm currently using the follow method to drag and drop multiple lists with JQuery UI.

PHP a query to get the items and one for the groups they are in

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;

}

PHP RE-ORDERING QUERY

foreach($_GET['item'] as $key=>$value) {
  mysql_select_db($database_dbconnect, $dbconnect);
    mysql_query("UPDATE EmProSect SET EmProSectOrder='".intval($key)."' WHERE idEmProSect='".intval($value)."'", $dbconnect) or die (mysql_error());
  }

THEN THE HTML

 <div class="stages ">
     <h3><?php echo getGroup(1);?></h3>
     <h3> <?php $list1 =  getSections(1); ?></h3>
        <ol class="stages-list" id="sortable1">
        <?php do{ ?>
           <li id="item_<?php echo $result['idEmProSect']; ?> ">
               <?php echo     $result['EmProSectName']; ?>
           </li>
        <?php }while($result = mysql_fetch_assoc($list1));     mysql_data_seek($list1,0); ?>
      </ol>
 </div>


 <div class="stages ">
   <h3><?php echo getGroup(2);?></h3>
   <h3>
      <?php $list2 =  getSections(2);?>
  </h3>
  <ol class="stages-list" id="sortable2">
    <?php do{ ?><li id="item_<?php echo $result['idEmProSect']; ?> "><?php echo $result['EmProSectName']; ?></li><?php }while($result = mysql_fetch_assoc($list2)); ?>
      </ol>
</div>

THE JQUERY

  $(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();
});

Answer 1

DEMO of multiple connected lists.

JS:

 $(function() {
$( ".sortable_list" ).sortable({
    connectWith: ".connectedSortable",

    receive: function(event, ui) {
        alert("dropped on = "+this.id); // Where the item is dropped
          alert("sender = "+ui.sender[0].id); // Where it came from
          alert("item = "+ui.item[0].innerHTML); //Which item (or ui.item[0].id)
    }         
}).disableSelection();


});

HTML:

<h3>Conected lists :  You can move items between any list</h3>     
<ul id="sortable1" class="sortable_list connectedSortable">
<li class="ui-state-default">List 1 - Item 1</li>
<li class="ui-state-default">List 1 - Item 2</li>
<li class="ui-state-default">List 1 - Item 3</li>
<li class="ui-state-default">List 1 - Item 4</li>
<li class="ui-state-default">List 1 - Item 5</li>
</ul>

<ul id="sortable2" class="sortable_list connectedSortable">
<li class="ui-state-highlight">List 2 - Item 1</li>
<li class="ui-state-highlight">List 2 - Item 2</li>
<li class="ui-state-highlight">List 2 - Item 3</li>
<li class="ui-state-highlight">List 2 - Item 4</li>
<li class="ui-state-highlight">List 2 - Item 5</li>
</ul>     

<ul id="sortable3" class="sortable_list connectedSortable">
<li class="ui-state-default">List 3 - Item 1</li>
<li class="ui-state-default">List 3 - Item 2</li>
<li class="ui-state-default">List 3 - Item 3</li>
<li class="ui-state-default">List 3 - Item 4</li>
<li class="ui-state-default">List 3 - Item 5</li>
</ul> 

<ul id="sortable4" class="sortable_list connectedSortable">
<li class="ui-state-highlight">List 4 - Item 1</li>
<li class="ui-state-highlight">List 4 - Item 2</li>
<li class="ui-state-highlight">List 4 - Item 3</li>
<li class="ui-state-highlight">List 4 - Item 4</li>
<li class="ui-state-highlight">List 4 - Item 5</li>
</ul> 

Answer 2

You should be able to use connectWith:

http://jqueryui.com/sortable/#connect-lists

All four of your lists have the class "stages-list"

<ol class="stages-list" id="sortable1">

So when you initialise each sortable, supply connectWith: "stages-list"

  $("#sortable1").sortable({
    opacity:0.6,
    connectWith: "stages-list",
     stop: function(i) {
         $.ajax({
            type: "GET",
            url: "emproOrder.php",
            data: $("#sortable1").sortable("serialize"),
            success: $("#successorder").show().delay(1000).fadeOut('slow')});       
    }                                                       
});

Answer 3

 $(function() { $("ul.sortable").sortable({ connectWith: '.sortable', update: function(event, ui) { /* var position = $('.sortable').sortable('serialize', { key: 'menu', connected: true });*/ $('div').empty().html( $('.sortable').serial() ); } }); }); (function($) { $.fn.serial = function() { var array = []; var $elem = $(this); $elem.each(function(i) { var menu = this.id; $('li', this).each(function(e) { array.push( menu + '['+e+']=' + this.id ); }); }); return array.join('&'); } })(jQuery); 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title></title> </head> <body> <ul class="sortable" id="menu1"> <li id="id_1">whatever</li> <li id="id_2">you</li> </ul> <ul class="sortable" id="menu2"> <li id="id_3">wanne</li> <li id="id_4">put</li> </ul> <ul class="sortable" id="menu3"> <li id="id_5">in</li> <li id="id_6">here</li> </ul> <div></div> </body> </html>