為Ruby on Rails程序加入拖曳排序功能
时间: 2024-02-13 12:04:03 浏览: 132
要为 Ruby on Rails 程序加入拖曳排序功能,你可以使用 jQuery UI 的 Sortable 插件和 Rails 的 AJAX 功能来实现。
首先,在你的 Rails 应用程序中安装 jQuery UI:
```ruby
# Gemfile
gem 'jquery-ui-rails'
```
然后,在应用程序的 JavaScript 文件中添加以下代码:
```javascript
// app/assets/javascripts/application.js
//= require jquery-ui/widgets/sortable
$(document).ready(function() {
$('ul.sortable').sortable({
axis: 'y',
update: function(event, ui) {
$.ajax({
url: '/items/sort',
type: 'PATCH',
data: $(this).sortable('serialize'),
success: function() {
console.log('Items sorted');
}
});
}
});
});
```
上面的代码将为具有 `sortable` 类的 `ul` 标签添加拖曳排序功能。当用户完成排序并释放鼠标时,它将向 `/items/sort` 发送一个 PATCH 请求,其中包含排序后的项目信息。
接下来,在控制器中添加 `sort` 动作:
```ruby
# app/controllers/items_controller.rb
class ItemsController < ApplicationController
def sort
params[:item].each_with_index do |id, index|
Item.where(id: id).update_all(position: index + 1)
end
head :ok
end
end
```
上面的代码将根据传递的项目 ID 更新其位置。最后,你需要在视图中为每个项目添加位置属性:
```html
<!-- app/views/items/index.html.erb -->
<ul class="sortable">
<% @items.each do |item| %>
<li data-id="<%= item.id %>">
<%= item.name %>
<span class="position"><%= item.position %></span>
</li>
<% end %>
</ul>
```
这就是为 Ruby on Rails 程序添加拖曳排序功能的基本步骤。你可以根据自己的需求进行修改和扩展。
阅读全文