内容拖拽排序与保存

class Inquiry::MsdsController < Admin::BaseController
  before_action :set_inquiry

  def index
    @msds = Msds.new(@inquiry)
    @msds_details = @inquiry.msds_details
    if @msds_details.present?
      @msds_name = @msds_details.where(title:"")
      @msds_details = @msds_details.order(:index_id)
      @index = @msds_details.size.times.to_a
      @ids = @msds_details.ids
      @title = @msds_details.pluck(:title)
      @message = @msds_details.pluck(:message)
    else
      @msds_details = @msds.request_modify_msds
      @index = *(0..15)
      @ids = ("0"*16).split("")
      @title = ["name","Hazards identification","First aid measures","Accidental release measures","Purity","Accidental release measures","Handling and storage","Exposure Controls / PPE","Physical and chemical properties","Stability and reactivity","Toxicological information","Ecological information","Disposal consideration","Transportation information","Regulatory information","Other information"]
      @message = @msds_details
    end
  end

  def save_msds
    @ids = params[:ids]
    @indexs = @ids.size.times.to_a
    @msds_ids = @inquiry.msds_details.ids.join(",").split(",")
    @titles = params[:title]
    @messages = params[:message]
    MsdsDetail.transaction do
      @indexs.each do |index|
        id = @ids[index]
        if id.to_i == 0
          msds_detail = MsdsDetail.new
        else
          msds_detail = MsdsDetail.find id
        end
        msds_detail.title = @titles[index]
        msds_detail.message = @messages[index]
        msds_detail.index_id = index
        msds_detail.inquiry_id = @inquiry.id
        msds_detail.save
      end
      (@msds_ids - @ids).each do |delete_id|
        msds_detail = MsdsDetail.find delete_id
        msds_detail.delete
      end
      @inquiry.save_audits(operator_type: 'User', operator_id: current_user.id, note: "save_msds")
    end
  end
end

  <h2 class="ui dividing header">Msds List</h2>
  <div class="content">
  <%= javascript_include_tag 'jquery-ui-sortable.min.js' %>
  <style>
    .J_sortable .field.placeholder {
        position: relative;
    }
    
    .J_sortable .field.placeholder:before {
        position: absolute;
    }

    .J_sortable,
    .J_sortable2 {
        min-height: 200px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    </style>
    <div class="pusher">
        <div class="ui fluid container">
            <div class="ui two column grid">
                <div class="sixteen wide column ">
                    <div class="ui  form" style="margin: 20px;">
                        <div class="ui very relaxed grid ">
                            <div class="eight wide column">
                                <div class="ui grid J_sortable connectedSortable">
                                    <div class="sixteen wide column J_append_relaxed">
                                        <label></label>
                                        <i class="edit icon J_change_label"></i>
                                        <div class="ui mini action input" style='display: none; margin-bottom: 4px;'>
                                            <input type="text">
                                            <button class="ui button J_change_label_btn">Edit</button>
                                        </div>
                                        <%= text_area "0", :message, :rows =>"6", :value=>"",'data-id'=>"0",'data-title'=>"" %>
                                    </div>
                                </div>

                            </div>
                            
                            <div class="ui vertical divider" style='left:50%'>Drag add</div>
                            <div class="eight wide column">
                                <div class="ui grid J_sortable2 connectedSortable" id="messages">
                                  <% @index.each do |index|%>
                                    <div class="sixteen wide column">
                                        <label><%= @title[index] %>:</label>
                                        <%= text_area "#{index}", :message, :rows =>"6", :value=>@message[index],'data-id'=>@ids[index],'data-title'=>@title[index] %>
                                    </div>
                                  <% end %>
                                </div>
                                <div class="actions" style="margin-top: 20px;">
                                    <div class="ui button cancel">cancel</div>
                                    <div class="ui blue button msds_submit">Submit</div>
                               </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script type="text/javascript">

    $(function() {
        // 保存复制节点html
        var J_append_relaxed_html =  $('.J_append_relaxed').prop('outerHTML');
        // 拖拽
        $(".J_sortable").sortable({
            connectWith: ".connectedSortable",
            // items: "li:not(.ui-state-disabled)",
            dropOnEmpty: false,
            change: function(event, ui) {
                // console.log(this)
            },
            //在移动结束前促发事件
            beforeStop: function(event, ui) {
                var $self = $(this);
                if ($self.find('.J_append_relaxed').length < 1) {
                    //只有当追加节点拖拽之后才创建一个新节点
                    $self.append(J_append_relaxed_html);
                }   

            }
        });

        $(".J_sortable2").sortable({
            connectWith: ".connectedSortable",
            // dropOnEmpty: false
        });

        //修改label
         $(document).on('click', '.J_change_label', function(event) {
            event.preventDefault();
            $(this).parent('.column').find('.action').show();
        });
        // 提交修改
        $(document).on('click', '.J_change_label_btn', function(event) {
            var self = $(this),
                self_parent_action = self.parent('.action'),
                self_parent_column = self_parent_action.parent('.column');

            self_parent_action.hide();
            var self_parent_action_val = self_parent_action.find('input').val();
            if (self_parent_action_val.length > 0) {
                self_parent_column.find('label').html(self_parent_action_val);
                self_parent_column.find('textarea').attr("data-title",self_parent_action_val);
            }
        });

        // 提交msds
        $(".msds_submit").click(function(){
            var ids = []
            var title = []
            var message = []
            JSON.stringify( $("#messages textarea").each(function(){  ids.push($(this).attr("data-id")); title.push($(this).attr("data-title")); message.push($(this).val())  }) )
            $.ajax({
                url : '<%= save_msds_inquiry_msds_path %>?inquiry_id=<%= @inquiry.id %>',
                type : 'post',
                data : {ids: ids,title: title,message: message},
                dataType : "json",
                beforeSend: function(request) {
                  request.setRequestHeader("X-CSRF-Token", $('meta[name="csrf-token"]').attr('content'));
                },
                success: function(result){
                    window.location.reload()
                }
              });
        });

    });

    </script>
</div>