announcement-test/app/views/admin/announcements/edit_sort.html.erb

<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "lib/main-forms" %>
  <%= stylesheet_link_tag "lib/fileupload" %>
  <%= stylesheet_link_tag "lib/main-list" %>
<% end %>
<%= form_for @setting, url: update_sort_setting_admin_announcement_path,  html: {class: "form-horizontal main-forms"}, method: 'post' do |f| %>
<div class="input-area">
  <div class="control-group">
    <%= f.label :maull, t("announcement.enable_manually_sort"), :class => "control-label muted" %>
    <div class="controls">
        <%= f.check_box :enable_manually_sort,:id=>'enable_manually_sort' %>
    </div>
  </div>
</div>
<% end %>
<div style="margin-bottom: 1em;">
  <button type="button" class="btn btn-primary" id="update_sort_button"><%= t('announcement.manual_update_sort') %></button>
</div>
<%= render partial: 'edit_sort' %>
<script type="text/javascript">
  function parse_val(val){
    return (val == '') ? 0 : parseFloat(val);
  }
  function update_sort(){
    var ids = $.map($('#sortable>tr'),function(v){return $(v).data('id')});
    $.ajax({
      url: "<%= update_sort_admin_announcement_path %>",
      type: 'POST',
      dataType: 'text',
      data: {ids: ids},
      success: function(data){
        $('#data-table').replaceWith(data);
        sortable();
      }
    });
  }
  function sortable(){
    $( "#sortable" ).sortable({
      update: function( event, ui ) {
        update_sort();
      }
    });
    $('.sort_number').change(function(){
      $(this).data('changed', true);
    });
    $('.sort_number').on('blur', function(){
      if(!$(this).data('changed')) {
        return;
      }
      var new_sort_number = parse_val($(this).val());
      var min_number = 0;
      var max_number = $('.sort_number').length;
      var pool = $('.sort_number').not(this);
      var same_order = pool.filter(function(){
        var tmp_sort = parse_val($(this).val());
        if (tmp_sort<min_number){
          min_number = tmp_sort;
        }
        if (tmp_sort>max_number){
          max_number = tmp_sort;
        }
        return tmp_sort==new_sort_number
      });
      var tmp_same_order = $();
      if (same_order.length>0) {
        tmp_same_order = same_order.eq(0);
        tmp_same_order.parents('tr').eq(0).before($(this).parents('tr').eq(0));
      } else if (new_sort_number>=max_number) {
        tmp_same_order = pool.eq(-1);
        tmp_same_order.parents('tr').eq(0).after($(this).parents('tr').eq(0));
      } else if (new_sort_number<=min_number) {
        tmp_same_order = pool.eq(0);
        tmp_same_order.parents('tr').eq(0).before($(this).parents('tr').eq(0));
      }
      update_sort();
      $(this).data('changed', false);
    });
  }
  $(document).ready(function(){
    $('#update_sort_button').click(update_sort);
    $('#enable_manually_sort').change(function(){
      $(this).parents('form').submit();
    })
    sortable();
  });
</script>