Javascript 使用jQuery在多个列表中移动列表项并保存到MySQL
我尝试更改此代码以处理多个列表，并且在列表之间拖放项目也很重要，而不仅仅是在同一个列表中： 以下是我制作的代码：Javascript 使用jQuery在多个列表中移动列表项并保存到MySQL,javascript,jquery,drag-and-drop,jquery-ui-sortable,Javascript,Jquery,Drag And Drop,Jquery Ui Sortable,我尝试更改此代码以处理多个列表，并且在列表之间拖放项目也很重要，而不仅仅是在同一个列表中： 以下是我制作的代码： <?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.
<?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>
jQuery动态拖放
ul{边距：10px；填充：0；最小高度：100px；最小宽度：100px；背景色：#87FFF5；}
#排序1，#排序2{
浮动：左；
宽度：400px；
}
#可排序1 li，#可排序2 li{
列表样式：无；
利润率：0.4px 0；
填充：10px；
背景色：#00CCCC；
边框：#中交固体1px；
颜色：#fff；
光标：移动；
}
#结果{
浮动：无；
明确：两者皆有；
宽度：260px；
填充：10px；
}
$（文档）.ready（函数（）{
$（函数（）{
$（“#sortable1，#sortable2”）.sortable（{connectWith:“.connectedSortable”，不透明度：0.6，光标：'move'，
更新：功能（事件、用户界面）{
var order=$（this.sortable（“serialize”）+'&action=updateRecordsStings'+'&id='+this.id+'&item='+ui.item[0]。innerHTML；
$.post（“updateDB.php”，顺序，函数（响应）{$（“#结果”）.html（响应）；}；
}
});
});
});
- 更新：功能（e、ui）{ if（this==ui.item.parent（）[0]）{ //你的代码在这里 }}