作用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