如何在不進入AJAX的情況下對一行html輸入字段進行重新排序

Question

我正在生成一組html行輸入文本字段，我希望我的最終用戶能夠重新排序。我不想使用AJAX，但用Javascript即可。

我很好，每行的側面放置了一些箭頭按鈕，當按下時會上下移動字段。

我的問題與AJAX是它太重（50-60kb）只是這個功能。我查看了一些雅虎代碼（YUI），但是再一次看來，它對於某個特定的功能來說似乎過分了。我發現這個 - http://www.danvk.org/wp/dragtable/ - 這似乎是最輕的代碼，但只允許列重新排序。

我將在最後一個選項上工作，但我對如何做到這一點的其他想法/方法持開放態度（即允許用戶重新排序行字段）。

PS：這個討論並不重要，我想，但我使用PHP來生成這些html文本字段。

Answer 1

添加到約瑟夫的答案...

根據W3C DOM Level 2 Core specification：

的insertBefore

插入現有子節點refChild之前節點newChild對象。 [...] 如果newChild已經在樹中，它首先被刪除。

因此，在撥打insertChild()之前不需要致電removeChild()。

此外，IE6 DOM支持非常糟糕，所以您可能需要爲它編寫特定的代碼。或者，也許你寧願不浪費時間來支持這個瀏覽器，並且ask users to upgrade。或者，如果您真的需要支持IE6，可能使用JavaScript庫（如jQuery）可能是一個簡單的解決方案。

編輯：這是最後的JavaScript解決方案的基礎上，約瑟夫的回答是：

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

Answer 2

你似乎很困惑; AJAX是一個通用術語，指的是使用Javascript通過子請求從服務器加載額外內容，而無需實際加載新頁面。有許多不同的Javascript庫可以處理AJAX請求。

當你說「AJAX」時，你可能正在考慮像JQuery這樣的更受歡迎的庫之一？

至於你的問題 - 有一點要記住的是，通過適當的服務器配置，客戶端瀏覽器將在第一次請求後通用緩存Javascript庫;因此一致的總體加載時間不受這些庫的大小的影響 - 僅限於首頁加載。如果您使用Google-hosted copy of JQuery，即使您的網站的絕大多數訪問者可能已經緩存了該文件，也可以避免這種情況。

Answer 3

您可以編寫JavaScript與此類似

function up(row) { 
    var prevRow = row.previousElementSibling; 
    if(prevRow != null) { 
     row.parentNode.removeChild(row); 
     document.body.insertBefore(row, prevRow); 
    } 
}; 

，並用它在你行這樣的功能：

<p> 
    <input type="text"/> 
    <a onclick="up(this.parentNode)">Up</a> 
</p> 

我同意你，你並不真的需要參考一個像這樣的簡單任務的Javascript框架。