3
私はいくつかのPropertyListsを持つことができるテンプレートを持っています。私の目標は関連するPropertyListsと利用可能なPropertyListsを持つフォームを持つことです。 このフォームでは、ドラッグしてアイテムを並べ替えることができるようにしたいと考えています。& 私はnested_form_fieldsとJQuery-ui（jquery-ui/sortableモジュールのみ）と一緒にRails 5を使用しています。ここでRailsドラッグ＆ドロップして要素をnested_formにソート
は私のモデルは以下のとおりです。
テンプレート：
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：
と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は、PropertyListsをTemplate 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' %>
も使用上の非表示フィールド：私は追加available_property_lists.byで隠しフィールドを使用しているこの問題を解決するには