允許用戶拖放表行以更改其順序的最簡單方法是什么？

Question

我有一個Ruby on Rails應用程序，我正在編寫一個用戶可以選擇編輯發票的應用程序。 他們需要能夠重新分配行的順序。 現在我在db中有一個索引列，用作默認排序機制。 我剛剛曝光並允許用戶編輯它。

這不是很優雅。 我希望用戶能夠拖放表格行。 我已經使用了Scriptaculous和Prototype，並熟悉它們。 我已經完成了拖放列表，但沒有像這樣完成表行。 任何人都有任何建議，不僅要重新排序，還要有效地捕獲重新訂購？

此外，用戶現在可以在JS中動態創建新行，因此該行也必須可重新排序。

如果可以使用RJS而不是直接JavaScript來完成加分。

Answer 1

我之前使用過Yahoo User Interface庫來執行此操作：

http://developer.yahoo.com/yui/dragdrop/

Answer 2

MooTools sortables實際上比script.aculo.us更好，因為它們是動態的; MooTools允許在列表中添加/刪除項目。 將新項目添加到script.aculo.us sortable時，您必須銷毀/重新創建可排序項以使新項目可排序。 如果列表包含許多元素，那么這樣做會有很多開銷。 由於這種限制，我不得不從script.aculo.us切換到更輕量級的MooTools，最終對這個決定非常滿意。

MooTools使新添加的項目可排序的方法就是：

sortables.addItems(node);

Answer 3

好吧，我做了一些淘洗，並想出了一些似乎主要起作用的東西。

edit.html.erb：

...
<table id="invoices">
   <thead>
     <tr>
      <th>Id</th>
      <th>Description</th>
     </tr>
   </thead>
   <tbody id="line_items">
      <%= render :partial => 'invoice_line_item', :collection => @invoice.invoice_line_items.sort %>
   </tbody>
</table>

<%= sortable_element('line_items', {:url => {:action => :update_index}, :tag => :tr, :constraint => :vertical}) -%>
...

應用程序/控制器/ invoices.rb

...
def update_index
  params["line_items"].each_with_index do |id, index|
    InvoiceLineItem.update(id, :index => index)
  end
  render :nothing => true
end
...

重要的部分是：“sortable_element”中的tag =>：tr和params [“line_items”] - 這給出了新的id列表並在drop上觸發。

損害：讓AJAX調用掉線，我想我更喜歡存儲訂單並在用戶點擊“保存”時更新。 在IE上未經測試。

Answer 4

我喜歡jQuery http://docs.jquery.com/UI/Sortables

$（ “＃myList中”）排序（{}）。

你需要編寫一些代碼來堅持它，但它並不那么難。

Answer 5

雅虎的界面比我想象的要容易，在不到四個小時的時間內做了一些時髦的工作。

Answer 6

Scriptaculous的sortables好像去，因為它內置的方式。 http://github.com/madrobby/scriptaculous/wikis/sortable

Answer 7

使用Prototype和Scriptaculous ：

Sortable.create('yourTable', {
    tag: 'tr',
    handles: $$('a.move'),
    onUpdate: function() {
        console.log('onUpdate');
    }
});