作用div框中内容可以任意排序，在front和back端同时进行

安装步骤

//默认在project这个model中执行

1.需要使用jquery-ui
#gemfile
gem 'jquery-ui-rails'
#application.js
//= require jquery-ui/core
//= require jquery-ui/widgets/sortable

2.需要添加html.sortable，添加到application.js中
https://github.com/Jayzen/reserved_file/blob/master/sortable/html.sortable.js

3.model中添加position:integer字段

4.view中添加属性
第一层div添加css属性sortable #必须
第二层div添加css属性project #明后可选
第二层的div添加data属性和属性值 data-id="<%= project.id %>"


5.添加coffeescript代码，添加到application.js中

//sortable是必须的，project是可选的
ready = undefined
set_positions = undefined

set_positions = ->
  $('.project').each (i) ->
    $(this).attr 'data-pos', i + 1
    return
  return

ready = ->
  set_positions()
  $('.sortable').sortable()
  $('.sortable').sortable().bind 'sortupdate', (e, ui) ->
    updated_order = []
    set_positions()
    $('.project').each (i) ->
      updated_order.push
        id: $(this).data('id')
        position: i + 1
      return
    $.ajax
      type: 'PUT'
      url: '/projects/sort'
      data: order: updated_order
    return
  return

$(document).ready ready

6.添加routes和controller代码
#routes.rb
resources :projects do
  put "sort", on: :collection
end

#controller.rb
def sort
  params[:order].each do |key, value|
    current_user.projects.find(value[:id]).update(position: value[:position])
  end

  render body: nil
end