使用jQuery將多個列表中的列表項目移動到MySQL並保存到MySQL

我嘗試將此代碼更改爲在多個列表上工作，並且在列表之間拖放項目不僅在同一列表中也很重要：link 使用jQuery將多個列表中的列表項目移動到MySQL並保存到MySQL

下面是代碼我做了什麼：

<?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文件。那麼我怎麼能在任何情況下返回項目被移動或掉線的名單？

來源

2015-03-03 Mandino

也許你可以使用變化（事件，UI）類型：sortchange

觸發此事件排序過程中，但只有當DOM位置發生了變化。 http://api.jqueryui.com/sortable/#event-change

或者如果沒有工作，這裏是完整的選項列表。 http://api.jqueryui.com/sortable/

UPDATE看到這篇文章。 jquery Sortable connectWith calls the update method twice ... 它正在調用兩次，您添加if語句並使用更新。

更新：功能（E，UI）{ 如果（這=== ui.item.parent（）[0]）{// 您的代碼在這裏 }}

來源

2015-03-03 14:51:19 user021205

謝謝。我已經嘗試了所有，但他們沒有工作正常。但是，也許這不是我嘗試獲取項目被拒絕的列表名稱的最佳方式。隨着更改，當我在列表之間移動項目時，我有時也會得到錯誤的列表名稱。 – Mandino 2015-03-03 15:07:43

看看這個例子，也許它可以是有用的，http://jsfiddle.net/nzskv/1/ – user021205 2015-03-03 15:21:50

http://stackoverflow.com/questions/3492828/jquery-sortable-connectwith-calls-the-update-method -twice，看到多數民衆贊成的問題，解決它只是添加，如果：更新：功能（e，ui）{if this）.sortable（「serialize」）+'＆action = updateRecordsListings'+'＆id ='+ this.id +'＆item ='+ ui.item [0] .innerHTML; （「ResponseDB.php」，order，function（theResponse）{$（「＃Result」）。html（theResponse）;}）; } } – user021205 2015-03-03 15:46:58

使用jQuery將多個列表中的列表項目移動到MySQL並保存到MySQL

回答

相關問題