使用 jQuery 在多个列表中移动列表项并保存到 MySQL

Question

我尝试更改此代码以使其也适用于多个列表，并且不仅在同一列表中，而且在列表之间拖放项目也很重要：link

这是我编写的代码：

   <?php require("db.php"); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Dynamic Drag'n Drop</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.7.3/jquery-ui.min.js"></script>

<style>
 ul {margin:10px;padding:0;min-height:100px;min-width:100px;background-color:#87FFF5;}
 #sortable1, #sortable2 {
 float: left;
 width: 400px;
 }
 #sortable1 li, #sortable2 li {
 list-style: none;
 margin: 0 0 4px 0;
 padding: 10px;
 background-color:#00CCCC;
 border: #CCCCCC solid 1px;
 color:#fff;
 cursor:move;
 }
 #Result {
 float:none;
 clear:both;
 width: 260px;
 padding:10px;
 }
</style>

<script type="text/javascript">
 $(document).ready(function(){
 $(function() {
 $("#sortable1, #sortable2").sortable({ connectWith: ".connectedSortable", opacity: 0.6, cursor: 'move',
 update: function(event,ui) {
 var order = $(this).sortable("serialize") + '&action=updateRecordsListings' + '&id=' + this.id + '&item='+ui.item[0].innerHTML;
 $.post("updateDB.php", order, function(theResponse){$("#Result").html(theResponse);});
 }
 });
 });
 });
</script>

</head>
<body>
 <div>
 <ul id="sortable1" class="connectedSortable">
 <?php
 $query = "SELECT * FROM records_multiple WHERE list='sortable1' ORDER BY recordListingID ASC";
 $result = mysql_query($query);
 while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
 ?>
 <li id="recordsArray_<?php echo $row['recordID']; ?>"><?php echo $row['recordID'] . ". " . $row['recordText']; ?></li>
 <?php } ?>
 </ul>

 <ul id="sortable2" class="connectedSortable">
 <?php
 $query = "SELECT * FROM records_multiple WHERE list='sortable2' ORDER BY recordListingID ASC";
 $result = mysql_query($query);
 while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
 ?>
 <li id="recordsArray_<?php echo $row['recordID']; ?>"><?php echo $row['recordID'] . ". " . $row['recordText']; ?></li>
 <?php } ?>
 </ul>
 </div>

 <div id="Result"></div>
</body>
</html>

拖放功能现在运行良好，但我无法将结果保存到 MySQL 数据库。如果我有多个列表，我必须知道项目被删除的新列表的名称和移动项目的 ID。所以我只能保存那个列表，我也可以更改移动项目的列表 ID。

如果我使用 update: function(event,ui) 列表的名称并不总是正确的。如果我将其更改为接收：function(event,ui)，它是正确的，但仅当我将项目移动到另一个列表中时才调用 PHP 文件。那么在任何情况下我如何才能取回项目被移动或删除的列表的名称？

Answer 1

也许你可以使用变化（事件，ui）类型：sortchange

此事件在排序过程中触发，但仅当 DOM 位置发生变化时才会触发。 http://api.jqueryui.com/sortable/#event-change

或者如果这不起作用，这里是完整的选项列表。 http://api.jqueryui.com/sortable/

更新看到这个 post。 jquery Sortable connectWith calls the update method twice ... 添加 if 语句并使用更新时，它会被调用两次。

更新：函数（e，ui）{ 如果（这=== ui.item.parent（）[0]）{ //你的代码在这里 } }

使用 jQuery 在多个列表中移动列表项并保存到 MySQL

Move list items in multiple lists with jQuery and save to MySQL

javascript

jquery

drag-and-drop

jquery-ui-sortable