Alternative approach to drag and drop sorting with acts_as_list

Curated over 1 year ago by @jeremysmithco

Description

Here’s an somewhat unconventional approach to drag and drop sorting using acts_as_list I came up with this week. In the old days, I would have implemented something similar to this RailsCasts episode. But I think I might like this better.

I made a YouTube video explaining my thinking.

As Chris Oliver notes, it’s probably best to use Signed Global IDs to avoid users tampering with model names and IDs.

app
- controllers
  - list_insertions_controller.rb
- javascript
  - controllers
    - sortable_controller.js
- models
  - concerns
    - list_insertable.rb
  - page.rb
- views
  - pages
    - _page.html.erb
    - index.html.erb
config
- routes.rb

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="mx-auto max-w-2xl">
  <div class="flex justify-between items-end pb-4 border-b border-gray-100 my-6">
    <div>
      <h3 class="flex items-center text-xl leading-none font-semibold h-8">
        Pages
      </h3>
    </div>
  </div>

  <div class="space-y-1" data-controller="sortable" data-sortable-url-value="<%= list_insertions_path %>">
    <%= render @pages %>
  </div>
</div>