在Rails中实现拖拽排序功能

回想到很久以前，JavaScript为了实现前端拖拽排序的事情，都是一个不容易的事。自从有了jQuery和jQuery UI后，很多常见的功能直接使用起来已经非常方便了，不需要自己进行二次开发。

好，今天我们就使用sortable，完成加上服务器端（Rails）的逻辑，完成一个完整的拖拽排序功能。

实现的逻辑是什么？

在服务器端添加排序的字段（position），然后我们的order排序根据position进行排序。每当我们前端拖拽结束后，通过异步Ajax把排序的结果发送到服务器，服务器根据传送过来的内容，重新设置position信息。

添加需要使用的Gem

gem 'acts_as_list'
gem 'jquery-ui-rails'

jquery-ui中的sortable提供前端拖拽排序效果的功能，acts_as_list则是一款服务器端排序功能的gem，提供丰富的方法，当然如果仅仅是一个简单的排序功能，这里不使用acts_as_list也是可行的。

前端加入拖拽排序效果

我们先在application.js引入jquery-ui：

//= require jquery-ui/widgets/sortable

然后我们加入调用sortable的方法：

document.addEventListener("turbolinks:load", function() {
  $( "[data-behavior='sortable']" ).sortable();
})

这样一来，只要在需要排序的dom中，加入data-behavior='sortable'就可以实现拖拽排序的效果了，参考：

<table class="table table-bordered table-hover">
  <thead>
    ...
  </thead>
  <tbody data-behavior='sortable'>
    ...
  </tbody>
</table>

加入排序接口

首先我们根据acts_as_list的文档，加入一个排序需要用到的字段：

rails g migration AddPositionToTodoItem position:integer
rails db:migrate

然后我们需要添加一个接口，用于处理排序信息：

// route.js

Rails.application.routes.draw do 
  resources :todo_items do
    collection do
      patch :sort 
    end
  end 
  ...
end

// controller

class TodoItemsController < ApplicationController
  def index
    @todo_items = TodoItems.order(:position)
  end

  def sort
    
  end
end

发送异步请求

现在服务器端的接口完成了，我们的目的就是当排序结束后，把数据打包发到这个接口中，为了方便操作，我把接口地址放在Dom里的data-url属性中。

<tbody data-url="<%= sort_todo_items_path %>" data-behavior='sortable'>
...
</tbody>

并且每个拖拽的元素，我们把它的ID设置为model的名称_model的id：

<tbody data-url="<%= sort_todo_items_path %>" data-behavior='sortable'>
  <% @todo_items.each_with_index do |todo_item, index| %>
    <tr id="<%= dom_id(todo_item) %>">
      ...
    </tr>
  <% end %>
</tbody>

然后我们在原来的sortable中，添加update方法，处理异步事务：

$( "[data-behavior='sortable']" ).sortable({
  update: function(e, ui) {
    $.ajax({
      url: $(this).data("url"),
      type: "PATCH",
      data: $(this).sortable('serialize')
    })
  }
});

通过上面的JavaScript代码，就可以实现，每天拖拽更新后，就会发送数据到对应的接口上，那发送过去的数据会是怎么样的呢？

处理数据

当我们尝试操作一遍后，就会发现发送到服务器的数据格式如下：

Parameters: {"todo_item"=>["2", "1", "3"]}

这个就是todo_item数据里，每个id的排序情况。所以我们可以根据这个排序信息，重新设置position就可以达到我们想要的排序结果。

...
def sort
  params[:todo_item].each_with_index do |id, index|
    TodoItem.where(id: id).update_all(position: index + 1)
  end

  head :ok
end
...

好了，目前我们前后端的功能都完成了，赶快试试效果吧。

image