在 Rails 中实现拖拽排序功能
首先,如果你使用了 webpack,那么你可以在 package.json 中添加:
"jquery-ui": "^1.12.1"
如果没有使用 webpack,那么在 Gemfile 文件中添加:
gem 'jquery-ui-rails'
然后,需要在 application.js 中引入:
import 'jquery-ui/ui/widgets/sortable'
或者
//= require jquery-ui/widgets/sortable
在 view 层,找到你列表的上一个 div,添加如下代码:
.questions-list-body#sortable data-url=upd_position_questions_path
data-url 是你后台进行更新顺序的 api,然后创建 js 文件,代码如下:
$(document).on('turbolinks:load', function () {
// 排序
$('#sortable').sortable({
handle: '.td-sortable',
stop: function () {
$.ajax({
type: 'POST',
url: $(this).data('url'),
data: $('#sortable').sortable('serialize'),
})
},
})
})
然后打开页面你会看到已经生成如下 html 页面:
然后我们在写好的 api 接口里面添加:
params[:questions].each_with_index do |q_id, index|
question = current_team.questions.find(q_id)
question.update(position: index)
end
然后就可以拖拽排序了。
PS: 有分页暂无法正确排序