JQuery UI 在多个列表中拖放和重新排序

Question

我目前有一个单独的列表，您可以在其中重新排序项目并将订单保存到 MYSQL 数据库中。我希望他们也能够在列表之间移动，但我不知道该怎么做。

我目前正在使用follow方法通过JQuery UI拖放多个列表。

PHP 获取项目的查询和他们所在的组的查询

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 重新排序查询

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

然后是 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>

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

你应该可以使用 connectWith：

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

您的所有四个列表都有“stages-list”类

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

因此，当您初始化每个可排序对象时，请提供 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 2

DEMO 的多个连接列表。

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 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>