地方でリモートワーク

プログラミング、先物、fx,仮想通貨なんでもやります

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