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

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

你会认为这是一个很常见的问题，应该有一个抛光的宝石解决方案。

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

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

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

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

解决方法

这里有一个体面的博客文章：

是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

主要有：

>前端使用jQuery UI sortable允许DOM元素的拖放重新排序
>后端使用acts_as_list处理更新数据库

这两者似乎相当强大，我能够实现一个基本功能的变化，新的项目创建在同一个屏幕上，一些CSS 3铃声和口哨(只是适当地设计.your-class.ui-sortable-helpper )没有太大的惊喜。我没有通过浏览器进行广泛的测试，但是在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’)。在Javascript中可以排序(‘serialize’)来创建一个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’]，并且包括一些检查/错误处理，以确保仅接受有意义的值。

(P.S.这与Ryan Bates在他的同一主题的付费，视频播放中给出的方法非常相似。)

(P.P.S.我知道这是一个古老的问题，但是像StackOverflow一样，Google让我在这里，所以我以为我会记录我做了什么。)

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

解决方法

猜你在找的jQuery相关文章