Rails jquery sortable 手動排序功能

https://gorails.com/episodes/sortable-drag-and-drop

1. ranked-model (gem)
2. jquery_sortable(jquery_ui)

yarn install

安裝jquery

$yarn add jquery

增加gem ranked-model

ctrlp>Gemfile

• gem 'ranked-model'
• $bundle install

增加關聯

ctrlp> app/models/event.rb

  class Event < ApplicationRecord

+   include RankedModel

+   ranks :row_order

增加model欄位

$ rails g migration add_row_order_to_events

migrate file 修改

    def change

+     add_column :events, :row_order, :integer  #增加欄位

+     Event.find_each do |e|                                #排序功能精華

+       e.update( :row_order_position => :last )

+     end

+     add_index :events, :row_order  #增加index搜尋效率
修改controller，改成用 rank(:row_order) 方法来做排序。
- @events = Event.all
+@events = Evevnt.rank(:row_order).all

舊方法

ctrlp>gemfile
gem "jquery-ui-ralis"
gem "acts-as-list"

javascript放在head的地方

<link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.1.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
放在head裡面很蠢對不對，不過可以動起來，而且還使用，就不蠢了。
比試半天動都不動好

rails sortable 手動拖拉排序表單

https://github.com/itmammoth/rails_sortable
https://www.youtube.com/watch?v=r884jAqAbHY


手動拖拉排序表單看起來很生猛ㄟ

Scaffold todo

'''bash

$ rails g scaffold todo description position:integer
$ bundle install acts_as_list 

'''

app/models/todo.rb
'''ruby
class Todo < ApplicationRecord
+ acts_as_list
end

'''

install stimulus

```bash

$ rails webpacker:install:stimulus

$ yarn install sortable

```

Webpacker now supports Stimulus.js