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

回答

相关问题