Railsで作るドラッグアンドドロップで表示順を変更できる方法とranked_modelの使い方

Railsで作るドラッグアンドドロップで表示順を変更できる方法とranked_modelの使い方です。

qiita.com

いつもRails関係の情報でお世話になっているjnchitoさんの記事を参考に、自分もRailsでドラッグ&ドロップ機能を実装できました!
ありがとうございます！

benw.me

こちらの元記事よりも汎用的なjavascriptコードになっているのがさすがです！

ranked_modelの細かな仕様

ranked_modelですが、使い方にコツがあるようなので、記録として残しておきたいと思います。

before_saveでdefault valueが設定される

ranked_modelで管理しているモデルのカラムですが、フォームからレコードを新規作成すると自動的にdefault valueが設定されます。10個すでにレコードがある場合は、4372893みたいな乱数がrow_orderカラムに設定されます。数字が汚いです。解決方法は後述します。

同じvalueのrow_orderがあれば1つ後ろにずれる

row_orderカラムが[1,2,3,4,5]という値ですでにレコードがあるとします。フォームからrow_orderカラムを5で作成すると、最新のレコードのrow_orderカラムが5になって、既存の5だったものは6になります。

先頭にもってくるとマイナスになる

ドラッグ&ドロップでレコードを先頭に持ってくると、これまた-4794328みたいな乱数がrow_orderカラムに設定されます。これを解決する方法は後述します。

きれいな数字にするには？

並べ替えるたびに、row_orderカラムの数字が汚くなってしまいます。乱数だったり、数字の間が抜けてしまったり。サンプルアプリのようにrow_orderカラムをviewに表示しない時はいいのですが、表示したいときもありますよね？

Sortable Bootstrap Tables in Rails — http://benw.me

私の場合はbefore_actionで自分で定義したメソッドを呼び出すことで解決しました。
Fruitテーブルをrow_order順に並べ替えてから、1から順番にrow_orderカラムをupdateしています。これでrow_orderカラムが1から始まる連番になります。
ajaxのコードはまだ書いていないので、ブラウザをリロードしないとrow_orderカラムのviewは更新されないのであしからず。

# fruits_controller.rb
class FruitController < ApplicationController
after_action :reset_row_order, only: [:sort, :create, :update]
def reset_row_order
Fruit.rank(:row_order).each_with_index do |fruit, i|
fruit.update_attribute :row_order, i + 1
end
end