使用 jQuery 和 Rails 3 实现 ajax 可排序列表

Question

有很多类似的问题，但我找不到完全符合我需求的问题。

您会认为这是一个非常普遍的问题，应该有完善的 gem 解决方案。

我想重新排序列表并使用 ajax 将每个项目的位置保存到数据库中，这与 Basecamp 列表中的待办事项非常相似。虽然能够在嵌套列表中将项目从一个级别移动到另一个级别会很好，但我根本不需要这个功能。

我正在使用 Rails 3.1，jQuery。将解决方案与可排序的 jQuery 插件集成是有意义的，但我愿意接受任何解决方案。

如果你不知道任何现成的解决方案，你能给我指点如何去做吗？

我的应用程序曾经使用acts_as_category 插件，但它没有得到维护，我已经手动实现了所有其他树功能。

Answer 1

这里有一篇不错的博客文章：

是webtempest.com/sortable-list-in-ruby-on-rails-3-almost-unobtrusive-jquery/

仍然在http://web.archive.org/web/20120315004343/http://webtempest.com/sortable-list-in-ruby-on-rails-3-almost-unobtrusive-jquery显示

基本上：

1. 前端使用jQuery UI sortable 允许对 DOM 元素进行拖放重新排序
2. 后端使用acts_as_list处理数据库更新

这些看起来都相当健壮，而且我能够在概述的基本功能上实现一个变体，在同一屏幕上创建新项目和一些 CSS 3 的花里胡哨（只需适当地设置 .your-class.ui-sortable-helper 的样式），而不会大惊小怪.我没有在浏览器上进行过广泛的测试，但在 WebKit 和 Firefox 中似乎很满意。

博客上的示例并没有真正使用acts_as_list ——它只是使用jQuery 序列化对象ID，然后直接在控制器中迭代它们——但我想如果你需要这些函数在后端很有用出于某种原因自动从那里进行更改。

博文中的关键代码：

Javascript：

$(document).ready(function(){
  $('#books').sortable({
    axis: 'y',
    dropOnEmpty: false,
    handle: '.handle',
    cursor: 'crosshair',
    items: 'li',
    opacity: 0.4,
    scroll: true,
    update: function(){
      $.ajax({
        url: '/books/sort',
        type: 'post',
        data: $('#books').sortable('serialize'),
        dataType: 'script',
        complete: function(request){
          $('#books').effect('highlight');
        }
      });
    }
  });
});

查看：

<li id="book_<%= book.id %>">

这包括一个像book_5 这样的id，它允许$('#books').sortable('serialize') 在Javascript 中创建一个Rails 可以解析的查询参数。

控制器：

def sort
  @books = Book.all
  @books.each do |book|
    book.position = params['book'].index(book.id.to_s) + 1
  book.save
end

这可能不合适，具体取决于您的模型的范围/访问控制方式。在我自己的解决方案中，我改为迭代 params['book']，并包含一些检查/错误处理以确保只接受有意义的值。

（附注：这与 Ryan Bates 在他关于同一主题的付费视频直播中给出的方法非常相似。）

（P.P.S. 我知道这是一个老问题，但是就像 StackOverflow 一样，Google 把我带到了这里，所以我想我会记录我所做的。）