Rails drag and drop using HTML5 and acts_as_list

_table.html.haml

%table.table
  %thead.table-active
    %tr
      %th Position
      %th Name

  %tbody
    - @fruits.each do |fruit|
      %tr.draggable{ draggable: true, id: "fruit-#{fruit.id}", data: { position: fruit.position, url: reorder_fruit_path(fruit, format: :js) }}
        %td= fruit.position
        %td= fruit.name

:css
  [draggable] {
    cursor: ns-resize;
  }
  .dragging {
    background-color: #fe7d5d;
    opacity: 0.5;
  }
  .enter {
    background-color: #eee;
  }
  @keyframes highlight {
    0% { background: white; }
    50% { background: #fe7d5d; }
    100% { background: white; }
  }
  .highlight {
    animation: highlight 1s;
  }

:coffeescript

  $(document).on 'dragstart', 'tr.draggable', (e) ->
    row = $(e.target).closest('tr')
    row.addClass('dragging')
    e.originalEvent.dataTransfer.setData('text', row.data('url'))

  $(document).on 'drop', 'tr.draggable', (e) ->
    e.preventDefault()
    row = $(e.target).closest('tr')
    row.removeClass('dragging enter')
    moveToPosition = row.data('position')
    url = e.originalEvent.dataTransfer.getData('text')
    return if url == row.data('url')
    $.post(url, { _method: 'PUT', fruit: { move_to_position: moveToPosition }})

  $(document).on 'dragend', 'tr.draggable', (e) ->
    row = $(e.target).closest('tr')
    row.removeClass('dragging enter')

  $(document).on 'dragenter dragleave', 'tr.draggable', (e) -> 
    row = $(e.target).closest('tr')
    row.toggleClass('enter')

  $(document).on 'dragover', 'tr.draggable', (e) ->
    e.originalEvent.preventDefault()
    e.originalEvent.dataTransfer.dropEffect = 'move'

fruit.rb

class Fruit < ApplicationRecord
  acts_as_list
  
  scope :ordered, -> { order(position: :asc) }
end

fruits_controller.rb

class FruitsController < ApplicationController
  
  def index
    @fruits = Fruit.ordered
  end
  
  def reorder
    position = params[:fruit][:move_to_position].to_i
    @fruit = Fruit.find params[:id]
    @fruit.insert_at(position) if position > 0
    @fruits = Fruit.ordered
  end
  
end

index.html.haml

%h1 Fruits

.fruits-table
  = render 'table'

reorder.js.coffee

$('.fruits-table').html "<%=j render 'table' %>"
$("#fruit-<%= @fruit.id %>").addClass 'highlight'

routes.rb

# ...

resources :fruits do
  member do
    put :reorder
  end
end

# ...