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

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>