javascript - 如何在不进入 AJAX 的情况下重新排序一行 html 输入字段

Question

我正在生成一组 html 输入文本字段行，我希望我的最终用户能够对其重新排序。我不想使用 AJAX，但可以使用 Javascript。

我同意在每一行的侧面放置一些箭头按钮，按下这些按钮可以上下移动字段。

我对 AJAX 的问题是它对于这个功能来说太重了 (50-60kb)。我看过一些 Yahoo 代码 (YUI)，但同样，它似乎对某个特定功能来说太过分了。我发现这个 - http://www.danvk.org/wp/dragtable/ - 这似乎是最轻的代码，但只允许列重新排序。

我将处理最后一个选项，但我愿意接受关于如何执行此操作的其他想法/方法(即，允许用户对按行字段重新排序)。

PS:我想这个讨论并不重要，但我正在使用 PHP 生成这些 html 文本字段。

Answer 1

添加到 Josef 的回答中......

根据 W3C DOM Level 2 Core specification :

insertBefore

Inserts the node newChild before the existing child node refChild. [...] If the newChild is already in the tree, it is first removed.

因此，在调用 insertChild() 之前无需调用 removeChild()。

此外，IE6 DOM 支持非常差，因此您可能需要为其编写特定代码。或者您可能不想浪费时间支持此浏览器，并且 ask users to upgrade .或者，如果您真的需要支持 IE6，也许使用 JavaScript 库(如 jQuery)可能是一个简单的解决方案。

编辑:这是最终的 JavaScript 解决方案，基于 Josef 的回答:

function up(row) {
    var prevRow = row.previousSibling;
    if(prevRow) {
        row.parentNode.insertBefore(row, prevRow);
    }
}