Javascript Rails拖放更改对象属性

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

集合模型

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

类映像

一个收藏有很多：图片

在我的编辑集合视图中，我将所有图像显示为网格视图中的缩略图。目前，我没有任何办法将图像发送到其他收藏。因为我不想强迫用户一次编辑一个图像，所以我认为这是一个使用拖放功能来更改图像所属集合的好机会

我在想，在我的编辑收藏页面上，有一个图片缩略图的网格，我会在旁边有一个收藏列表。允许用户将图像缩略图拖动到集合上，以更改图像的集合id值

因为我还是一个很好的noobish，所以我正在寻找一个教程来解决如何以这种方式更改属性的问题，或者一个gem，或者任何建议。到目前为止，我发现的所有材料似乎都集中在使用拖放来改变列表的层次结构上

---

有人有什么建议吗？

您可能希望使用ajax来实现这一点

因此，当他们将图片拖到一个新集合中时，在本地更新图片以获得新id，并向负责此操作的新控制器操作发送ajax请求。您需要传入旧图片id和新集合以更新所需的属性

由于您的标签，我假设您已经知道这是怎么回事，但例如：

在前端，每当一张图片被拖到一个新的集合中时，您都可以这样做

$.ajax({
    url: '/images/8',
    type: 'PUT',
    data: { new_collection: collection_id },
    success: function (response) {
        //do whatever you need, like maybe assigning the new id to the picture you have locally.
    },
    error: function (response) {
        // do whatever you'd do if it failed, like maybe ask them to try again. Since user is just dragging, ideally this would never happen, but perhaps they don't have internet connection. Again, at this point it becomes a matter of saying they can't do that without internet connection or maybe caching it locally, telling them you've cached it and that you'd go forward and do that when they have internet in the future. Tougher, but cooler and maybe nice to learn.
    }
});

在rails端，在

routes.rb中，您将看到如下内容：

resources:images
，其中包括上面的路线

然后，在控制器
ImagesController
中，您将看到以下内容

def update
    @image = Image.find(params[:id])

    @image.assign_attributes(collection_id: params[:new_collection])

    if @image.save
        render json: @image, status: 200
    else
        render json: @image.errors.full_messages #not sure if right off the top of my head.
    end
end

基本上，这就是你要做的事情。
实现可拖动的功能需要某种Javascript（我不知道有什么东西可以将其抽象出来），所以请确保你熟悉如何首先实现

从广义上讲，对于这类事情，最流行的解决方案可能是jQuery和。您可以通过使用
jqueryuirails
gem（）将这些信息输入到Rails应用程序中。您需要在
app/assets/application.js
文件中包含所需的模块：

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

基本上，您需要在控制器上执行一个操作，该操作需要几个参数（在本例中，您希望将图像移动到的图像
id
和
collection\u id
），找到该图像并基于这些参数更改其集合，然后呈现一个Javascript或JSON响应，告诉浏览器已经做了（或没有做）更改——假设您想留在页面上。e、 g:

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方面的功能。阅读“可拖放”和“可拖放”的相关内容，查看可用的方法/事件，并根据自己的喜好进行调整。您可能会这样做：

$( ".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请求的信息（包括如何使用成功/失败处理程序），但我只想让您知道，您需要找到一种从DOM元素获取
ID
的方法，传统的方法是在视图中为它们提供
数据
属性（我在顶部链接的指南中提到）

将来，如果你添加更多类似的特性，并且你的应用程序在前端变得足够复杂，你就不能保持你的JavaScript组织起来，那么你可能想考虑一个像ReBoo.js这样的前端框架，而不是依赖DOM。
不管怎样，我希望这至少足以让你开始