javascript - Rails 拖放更改对象属性

Question

我有两个模型；收藏和图像

集合模型

class Collection < ActiveRecord::Base
  has_many :images, dependent: :destroy
  accepts_nested_attributes_for :images
end

图像模型

class Image < ActiveRecord::Base
  belongs_to :collection    
  mount_uploader :file, ImageUploader   
end

集合有_很多:图像

在我的 edit_collection View 中，我在 GridView 中将所有图像显示为缩略图。目前我没有任何方法将图像发送到另一个集合。由于我不想强制用户一次编辑一张图像，因此我认为这将是一个使用拖放功能来更改图像所属集合的好机会。

我想在我的 edit_collection 页面上，有图像缩略图网格，我会在侧面有一个集合列表。允许用户将图像缩略图拖到集合上以更改图像的collection_id值。

由于我仍然很菜鸟，所以我正在寻找一个解决以这种方式更改属性的教程，或者可能是一个 gem ，或者任何建议。到目前为止，我发现的所有 Material 似乎都集中在使用拖放来更改列表的层次结构。

有人有什么建议吗？

Answer 1

实现可拖动功能将需要某种类型的Javascript(我不知道有任何 gem 可以将其抽象出来)，所以请确保您熟悉如何Javascript/Ajax is used in Rails第一的。

从广义上讲，这种事情最流行的解决方案可能是 jQuery draggable 的组合。和 droppable 。您可以使用 jquery-ui-rails gem ( more instructions here ) 将它们添加到 Rails 应用程序中。您需要在 app/assets/application.js 文件中引用所需的模块:

//= require jquery
...
//= require jquery.ui.draggable
//= require jquery.ui.droppable
...
//= require_tree .

基本上，您需要在 Controller 上执行一个带有几个参数的操作(您想要将其移动到的图像 id 和 collection_id 是个好主意在本例中)，找到该图像并根据这些参数更改其集合，然后呈现 Javascript 或 JSON 响应来告诉浏览器已进行(或未进行)更改 - 假设您想留在页面上。例如:

def change_collection
  @image = Image.find(params[:id])
  @image.collection_id = params[:collection_id]
  if @image.save
    render json: ..., status: ...
  else
    render json: ..., status: ...
  end
end

这只是一个给您一个想法的示例，出于安全原因，您可能不想像这样直接分配参数。

您需要一条指向该操作的路线，例如:

resources :images do
  patch 'change_collection', on: :member 
end

然后你需要实现 Javascript 方面的事情。阅读API documentation可拖动和可放置以查看可用的方法/事件，并根据您的喜好进行调整。你可能会做这样的事情:

$( ".html_class_representing_your_images" ).draggable();

$( ".html_class_representing_your_collections" ).droppable({
  drop: function() {
    Ajax request to the route we just made goes here
  }
});

您可以在其他地方找到有关如何使用 jQuery 发出 Ajax 请求的大量信息(包括如何使用成功/失败处理程序)，但我只是让您知道，您需要找到一种方法来获取 ids 来自 DOM 元素，传统的方法是在 View 中为它们提供 data 属性(在我顶部链接的指南中提到)。

将来，如果您添加更多像这样的奇特功能，并且您的应用程序在前端开始变得足够复杂，以至于您无法组织 Javascript，那么您可能需要考虑像 Backbone.js 这样的前端框架，而不是如此依赖 DOM。

无论如何，我希望这至少足以让您开始。