jQueryとRails 3でajaxのソート可能なリストを実装する

Question

似たような質問がたくさんありますが、私のニーズを正確に満たすものは見つかりません。

あなたはこれが非常に一般的な問題だと思います。そこには洗練された宝石の解決策があるはずです。

BasecampのリストにあるTo Do項目と非常によく似た、各項目の位置を並べ替えてデータベースに保存する必要があります。ネストされたリスト内のあるレベルから別のレベルへアイテムを移動できるのは良いことですが、実際にはそのフィーチャーはまったく必要ありません。

私はRails 3.1、jQueryを使用しています。ソリューションをソート可能なjQueryプラグインと統合するのは理にかなっていますが、私はどのソリューションにも対応しています。

解決策がわからない場合は、どうすればいいか教えてください。

私のアプリはacts_as_categoryプラグインを使用していましたが、維持管理されていないので、他のすべてのツリー機能を手動で実装しました。

Answer 1

ここで、この上のまともなブログの記事があります：

webtempest.com/sortable-list-in-ruby-on-rails-3-almost-unobtrusive-jquery/

はまだ基本的にhttp://web.archive.org/web/20120315004343/http://webtempest.com/sortable-list-in-ruby-on-rails-3-almost-unobtrusive-jquery

で示した：

1. フロントエンドを許可するようにjQuery UI sortableを使用していますdrag- DOM要素の並べ替えと並べ替え
2. バックエンドusちょうど（これらは、合理的に堅牢に見えるの両方、と私は同じ画面上に新しいアイテムを作成して、概説基本的な機能のバリエーションを実装することができましたし、いくつかCSS 3つの添えものデータベースに

の更新を処理するために、ES acts_as_listあまり騒がしいことなく.your-class.ui-sortable-helperを適切にスタイルします）。私はブラウザ間で広範にテストしていませんが、WebKitとFirefoxではうれしいようです。

ブログの例では実際にはacts_as_listをあまり使用していません - jQueryを使ってオブジェクトIDをシリアライズしてコントローラで直接反復処理しますが、必要に応じてバックエンドにこれらの機能を持たせると便利です何らかの理由でそこからの変更を自動化します。

ブログ記事からキーコード：

Javascriptを：

$(document).ready(function(){ 
    $('#books').sortable({ 
    axis: 'y', 
    dropOnEmpty: false, 
    handle: '.handle', 
    cursor: 'crosshair', 
    items: 'li', 
    opacity: 0.4, 
    scroll: true, 
    update: function(){ 
     $.ajax({ 
     url: '/books/sort', 
     type: 'post', 
     data: $('#books').sortable('serialize'), 
     dataType: 'script', 
     complete: function(request){ 
      $('#books').effect('highlight'); 
     } 
     }); 
    } 
    }); 
}); 

ビュー：

<li id="book_<%= book.id %>"> 

これは、クエリを作成するために、JavaScriptで$('#books').sortable('serialize')を可能book_5などのIDを含み、 Railsが解析できるパラメータです。

コントローラー：

def sort 
    @books = Book.all 
    @books.each do |book| 
    book.position = params['book'].index(book.id.to_s) + 1 
    book.save 
end 

これは、あなたのモデルは、アクセス制御/スコープの方法に応じて、適切でない可能性があります。私自身の解決策では、代わりにparams['book']を繰り返し、意味のある値だけが受け入れられるようにいくつかのチェック/エラー処理が含まれていました。

（PSこれはアプローチライアンベイツと非常によく似ている彼に与え、同じトピックに関するビデオキャストをpaywalled。）

（PPS私はこのように、古い質問ですが、承知していますよくStackOverflowでGoogleが私をここに連れて行ったので、私が行ったことを文書化すると思った。）