这些看起来都相当强大，并且我能够实现概述的基本功能的变体，并在上创建新项目相同的屏幕和一些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']，并包含一些检查/错误处理以确保只接受有意义的值。

（PS，这与 Ryan Bates 在他的付费墙视频广播中针对同一主题提供的方法非常相似。）

（PPS 我知道这是一个老问题，但是，正如经常发生的那样通过 StackOverflow，Google 将我带到了这里，所以我想我应该记录一下我所做的事情。）

There is a decent blog post on this here:

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

Still shows at http://web.archive.org/web/20120315004343/http://webtempest.com/sortable-list-in-ruby-on-rails-3-almost-unobtrusive-jquery

Essentially:

The front-end uses jQuery UI sortable to allow drag-and-drop reordering of DOM elements
The back-end uses acts_as_list to handle updating the database

These both seem reasonably robust, and I was able to implement a variation on the basic functionality outlined, with new item creation on the same screen and some CSS 3 bells and whistles (just style the .your-class.ui-sortable-helper appropriately) without much fuss. I haven't tested extensively across browsers, but it seems happy in WebKit and Firefox.

The example on the blog doesn't really use acts_as_list much – it just serialises the object IDs using jQuery and then iterates over them in the controller directly – but I guess it's useful having those functions on the back end if you need to automate changes from there for some reason.

Key code from the blog post:

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');
        }
      });
    }
  });
});

View:

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

This includes an id like book_5, which allows $('#books').sortable('serialize') in the Javascript to create a query parameter which Rails can parse.

Controller:

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

This might not be appropriate, depending on how your model is scoped / access-controlled. In my own solution I iterated over the params['book'] instead, and included some checking/error-handling to ensure only meaningful values would be accepted.

(P.S. this is quite similar to the approach Ryan Bates gives in his, paywalled, videocast on the same topic.)

(P.P.S. I am aware this is an old question, but, as so often with StackOverflow, Google got me here so I thought I would document what I did.)

回复收藏 0 原文

~没有更多了~