回想到很久以前，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
网友评论