在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'就可以实现拖拽排序的效果了,参考:


    ...
  
    ...
  

加入排序接口

首先我们根据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属性中。


...

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


  <% @todo_items.each_with_index do |todo_item, index| %>
    
      ...
    
  <% end %>

然后我们在原来的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
...

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

在Rails中实现拖拽排序功能_第1张图片
image

你可能感兴趣的:(在Rails中实现拖拽排序功能)