ruby-on-rails – Rails拖放和排序元素到nested_form

我有一个可以有多个PropertyLists的模板,我的目标是拥有一个带有相关PropertyLists和可用PropertyLists的表单.
在这种形式,我希望能够拖拉和放大删除和排序项目.
我正在使用Rails 5,使用 nested_form_fields和JQuery-ui(只有jquery-ui / sortable模块).

这是我的模特：

模板：

class Template < ApplicationRecord
  has_many :template_property_lists
  has_many :property_lists,through: :template_property_lists
  accepts_nested_attributes_for :property_lists
  validates_presence_of :name
end

对propertyList：

class PropertyList < ApplicationRecord
  has_many :properties,-> { order(position: :asc) },dependent: :destroy
  has_many :template_property_lists
  has_many :templates,through: :template_property_lists

  accepts_nested_attributes_for :properties,allow_destroy: true,reject_if: :all_blank
  acts_as_list scope: :template,top_of_list: 0

  validates_presence_of :name
  validates_uniqueness_of :name
end

TemplatePropertyList：

class TemplatePropertyList < ApplicationRecord
  belongs_to :template
  belongs_to :property_list
end

和JavaScript代码：

$(function() {
    $(".sortable").sortable({
        update: function(event,ui) {
            var index = ui.item.index();
            ui.item.find('input.position').val(index);
        }
    }).disableSelection();
});


$( function() {
  $( ".used,.available" ).sortable({
    connectWith: ".connected-sortable",placeholder: "ui-state-highlight"
  }).disableSelection();
} );

表格部分：

<div class="panel panel-default">
  <div class="panel-heading">
    <h1 class="panel-title">
      <%= t(:template) %>
    </h1>
  </div>

  <div class="panel-body">
    <div class="col-md-6">
      <div class="form-group <%= 'has-error' if @template.errors[:name].present? %>">
        <%= f.label :name,t(:name) %>
        <%= f.text_field :name,class: 'form-control' %>
      </div>
    </div>

    <div class="col-md-6">
      <div class="form-group <%= 'has-error' if @template.errors[:description].present? %>">
        <%= f.label :description,t(:description) %>
        <%= f.text_field :description,class: 'form-control' %>
      </div>
    </div>

  </div>
</div>

<!-- Template Property Lists -->
<div class="panel panel-default">
  <div class="panel-heading">
    <h1 class="panel-title">
      <%= t(:property_lists) %>
    </h1>
  </div>

  <div class="panel-body">
    <ul class="list-group">
      <li class="list-group-item">
        <div class="row text-center">
          <div class="col-md-1"></div>
          <div class="col-md-5">
            <%= label_tag t(:name) %>
          </div>
          <div class="col-md-5">
            <%= label_tag t(:description) %>
          </div>
          <div class="col-md-1 text-center"></div>
        </div>
      </li>
    </ul>

    <ul class="list-group used connected-sortable">
      <%= f.nested_fields_for :property_lists do |p| %>
      <li class="list-group-item">
        <%= p.hidden_field :position,class: 'position' %>
        <%= p.hidden_field :name %>
        <%= p.hidden_field :description %>
        <div class="row text-center">
          <div class="col-md-1">
            <span class="glyphicon glyphicon-sort"></span>
          </div>
          <div class="col-md-5">
            <%= p.object.name%>
          </div>
          <div class="col-md-5">
            <%= p.object.description%>
          </div>
          <div class="col-md-1 text-center"></div>
        </div>
      </li>
      <% end %>
    </ul>
  </div>

</div>

<!-- Available Property Lists -->
<div class="panel panel-default">
  <div class="panel-heading">
    <h1 class="panel-title">
      <%= t(:available_property_lists) %>
    </h1>
  </div>

  <div class="panel-body">
    <ul class="list-group">
      <li class="list-group-item">
        <div class="row text-center">
          <div class="col-md-1"></div>
          <div class="col-md-5">
            <%= label_tag t(:name) %>
          </div>
          <div class="col-md-5">
            <%= label_tag t(:description) %>
          </div>
          <div class="col-md-1"></div>
        </div>
      </li>
    </ul>

    <ul class="list-group available connected-sortable">
      <% @available_property_lists.each do |property_list| %>
      <li class="list-group-item">
        <%= hidden_field_tag :position,class: 'position' %>
        <%= hidden_field_tag :id,property_list.id %>
        <div class="row text-center">
          <div class="col-md-1">
            <span class="glyphicon glyphicon-sort"></span>
            <% property_list.id %>
          </div>
          <div class="col-md-5">
            <%= property_list.name %>
          </div>
          <div class="col-md-5">
            <%= property_list.description %>
          </div>
        </div>
      </li>
      <% end %>
    </ul>
  </div>
</div>

我的问题：
当我提交表单时,我想要选择与模板关联的TemplateLists,这意味着property_lists_attributes将在Template PropertyLists部分中使用PropertyLists并使用正确的order参数.请注意,这是一个简单的表单提交,而不是拖放或排序时的AJAX.

<%= hidden_field_tag "template[template_property_lists_attributes][#{property_list.id}][property_list_id]",property_list.id %>
<%= hidden_field_tag "template[template_property_lists_attributes][#{property_list.id}][position]",property_list.position,class: 'position' %>
<%= hidden_field_tag "template[template_property_lists_attributes][#{property_list.id}][template_id]",template.id %>
<%= hidden_field_tag "template[template_property_lists_attributes][#{property_list.id}][_destroy]",true,class: 'destroy' %>

<%= p.hidden_field :id %>
<%= p.hidden_field :position,class: 'position' %>
<%= p.hidden_field :property_list_id %>
<%= p.hidden_field :template_id %>
<%= p.hidden_field :_destroy,class: 'destroy' %>

$(function() {
    $(".used,.available").sortable({
        connectWith: ".connected-sortable",placeholder: "ui-state-highlight",});
    $(".available").on("sortremove",function(event,ui) {
        ui.item.find('input.destroy').val(false);
    });

    $(".used").on("sortremove",ui) {
        ui.item.find('input.destroy').val(true);
    });
});