您好我有一个如下所示的列表：http://imgur.com/z2nf4yz 在此列表中，您可以拖动不同列表中的项目。现在，我想在拖动它们后更新这些项目的数据库值。理想情况下，我只想在按下“保存”按钮后更新，但如果要做很多工作，你可以忽略它。
我用它来拖动项目：http://johnny.github.io/jquery-sortable/，这与jQuery UI的版本非常相似。
我现在绝对知道Ajax是如何工作的，我希望得到一些帮助。这是列表结构：
<ol class="nav nav-tabs nav-stacked sortable" style=
"margin-top: 25px;">
<li class="page_select menuid_1" style=
"color: #1b1b1b; padding: 40px 20px 10px; margin-top: 10px; font-weight: bold; font-size: 14px;">
Main Menu</li>
<li class="page_select menuid_1 position_1 online">
<span class="pull-right" style=
"margin: 8px 32px 0 0"><a class=
"deleteToggle icon-trash pull-right"
data-toggle="modal" href="#deleteModal" id=
"deleteId1" style=
"font-style: italic"></a></span><a href=
"pages.php?page=1">Home</a>
<ol class="nav nav-tabs nav-stacked"></ol>
</li>
<li class="page_select menuid_1 position_4 online">
<span class="pull-right" style=
"margin: 8px 32px 0 0"><a class=
"deleteToggle icon-trash pull-right"
data-toggle="modal" href="#deleteModal" id=
"deleteId2" style=
"font-style: italic"></a></span><a href=
"pages.php?page=2">About Me</a>
<ol class="nav nav-tabs nav-stacked">
<li class=
"page_select menuid_1 position_1 online">
<span class="pull-right" style=
"margin: 8px 32px 0 0"><a class=
"deleteToggle icon-trash pull-right"
data-toggle="modal" href="#deleteModal"
id="deleteId12" style=
"font-style: italic"></a></span><a href="pages.php?page=12">Test</a>
</li>
<li class=
"page_select menuid_1 position_2 offline">
<span class="pull-right" style=
"margin: 8px 32px 0 0"><a class=
"deleteToggle icon-trash pull-right"
data-toggle="modal" href="#deleteModal"
id="deleteId11" style=
"font-style: italic"></a></span><a href="pages.php?page=11">Test
Page</a>
</li>
</ol>
</li>
<li class="page_select menuid_1 position_4 online">
<span class="pull-right" style=
"margin: 8px 32px 0 0"><a class=
"deleteToggle icon-trash pull-right"
data-toggle="modal" href="#deleteModal" id=
"deleteId3" style=
"font-style: italic"></a></span><a href=
"pages.php?page=3">Contact</a>
<ol class="nav nav-tabs nav-stacked">
<li class=
"page_select menuid_1 position_9 offline">
<span class="pull-right" style=
"margin: 8px 32px 0 0"><a class=
"deleteToggle icon-trash pull-right"
data-toggle="modal" href="#deleteModal"
id="deleteId7" style=
"font-style: italic"></a></span><a href="pages.php?page=7">Test
Page</a>
</li>
</ol>
</li>
<li class="page_select menuid_1 position_3 online">
<span class="pull-right" style=
"margin: 8px 32px 0 0"><a class=
"deleteToggle icon-trash pull-right"
data-toggle="modal" href="#deleteModal" id=
"deleteId4" style=
"font-style: italic"></a></span><a href=
"pages.php?page=4">Portfolio</a>
<ol class="nav nav-tabs nav-stacked"></ol>
</li>
<li class="page_select menuid_1 position_3 online">
<span class="pull-right" style=
"margin: 8px 32px 0 0"><a class=
"deleteToggle icon-trash pull-right"
data-toggle="modal" href="#deleteModal" id=
"deleteId5" style=
"font-style: italic"></a></span><a href=
"pages.php?page=5">Shop</a>
<ol class="nav nav-tabs nav-stacked"></ol>
</li>
<li class="page_select menuid_2" style=
"color: #1b1b1b; padding: 40px 20px 10px; margin-top: 10px; font-weight: bold; font-size: 14px;">
Footer Menu</li>
<li class="page_select menuid_2 position_5 online">
<span class="pull-right" style=
"margin: 8px 32px 0 0"><a class=
"deleteToggle icon-trash pull-right"
data-toggle="modal" href="#deleteModal" id=
"deleteId6" style=
"font-style: italic"></a></span><a href=
"pages.php?page=6">Sitemap</a>
<ol class="nav nav-tabs nav-stacked"></ol>
</li>
<li class=
"page_select menuid_2 position_9 offline">
<span class="pull-right" style=
"margin: 8px 32px 0 0"><a class=
"deleteToggle icon-trash pull-right"
data-toggle="modal" href="#deleteModal" id=
"deleteId8" style=
"font-style: italic"></a></span><a href=
"pages.php?page=8">Last Page</a>
<ol class="nav nav-tabs nav-stacked"></ol>
</li>
<li class="page_select menuid_3" style=
"color: #1b1b1b; padding: 40px 20px 10px; margin-top: 10px; font-weight: bold; font-size: 14px;">
aa
<p style=
"margin-left: 40px; font-size: 12px; color: #ccc;">
No pages yet.</p>
</li>
</ol>
格式化有点糟糕，因为它是由PHP生成的。如果不这样做，请随意提出新的课程和内容。
在数据库中，我有3个字段“position”，“parent_id”和“menu_id”。位置是列表中的位置，parent_id是它所在的项目的id，而menu_id是它所在的菜单（在屏幕截图中，您将注意到不同的菜单）。移动元素时，所有这些值都必须更新。
现在，我知道这可能是很多工作，所以我不指望任何人只需要提交代码。如果有人能以任何方式帮助我，我将非常感激。
答案 0 :(得分：1)
我最近在ASP中做过类似的事情。这是您可以根据自己的需求进行定制的基本想法：
HTML列表具有属性iden，它是数据库中的记录ID：
<li iden="<%=rs("ID")%>" class="ui-state-default"><%=rs("TITLE")%></li>
Javascript运行update事件：
$("#order-block1").sortable({
placeholder: "ui-state-highlight",
forcePlaceholderSize: true,
update: function( event, ui ) {
var t = ""
$(this).children('li').each(function(index, element) {
t+= "UPDATE PROJECTS SET RANK = '" + (index+1) + "' WHERE ID =" + $(this).attr('iden') + ";"
});
$.ajax({
url: 'updateOrder.asp?str=' + t, type: 'POST',
success: function(data) {
},
error: function() {
alert('error updating order');
}
});
}
});
服务器端（updateOrder.asp）可能类似于：
set conn=Server.CreateObject("ADODB.Connection")
conn.Open db
str = request.QueryString("str")
a = split(str, ";")
for each x in a
on error resume next
conn.Execute x
next
conn.close
它基本上创建了一个带有SQL代码的字符串，然后在;上拆分并使用循环执行每个sql命令。