拖动和交换列表元素

时间:2013-10-25 16:47:02

标签: javascript html dom asp-classic drag-and-drop

我有一个从数据库动态填充的无序列表。我想要做的是拖放列表项以重新排序列表。理想情况下,列表项的新位置将保存到数据库中的字段。我能这样做。我需要帮助的是Java脚本代码,它将列表项与另一个项交换。

以下是填充列表的代码。如您所见,该页面是用ASP编写的。

While not rsAwards.EOF
response.write "<li>" & rsAwards("Award_Name")
%>
<a href='edit_awards.asp?Action=edit&Award_ID=<%=rsAwards("Award_ID")%>'>Edit</a>&nbsp;
<a class="lb" href='action_awards.asp?Action=delete&Award_ID=<%=rsAwards("Award_ID")%>'>Delete</a></li>
<%
rsAwards.MoveNext
Wend

提前感谢。

1 个答案:

答案 0 :(得分:0)

它非常容易! 1行代码。只需添加jquery UI(您不必添加所有内容)和一些像这样的JavaScript:

$("#DivContainingYourliElements").sortable({delay:300,items:".myListElement"});

这将使元素拖放可排序

你只需要一个countaining div来调用sortable,并为你想要排序的每个li元素添加一个类(这里是它的.mylistElement)

看到这个 http://jqueryui.com/sortable/

作为另一个演示,我在这里使用它。只需使用用户名登录:demo password:demo 然后单击第一个项目,您将看到可排序的培训路径

http://knowledgecity.com/tna/tnaadmin.php

顺便说一下,“延迟”归因很重要。它指定了点击和“拖动”之间的不同。所以在我的情况下,您可以单击它们,或者如果您单击并按住300毫秒,它将进入拖动/排序模式。如果他们只需要排序,请将延迟设置为1.