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 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(){
      var new_sort_number = parseFloat($(this).val());
      var min_number = $('.sort_number').length;
      var max_number = 0;
      var pool = $('.sort_number').not(this);
      var same_order = pool.filter(function(){
        var tmp_sort = parseFloat($(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 = null;
      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{
        //ex. 1 2 3 5,insert 4
        if (parseInt(pool.eq(0).val())<parseInt(pool.eq(-1).val())){ //asc
          $.each(pool,function(){
            var tmp_sort = parseFloat($(this).val());
            if (new_sort_number>max_number){
              if (tmp_sort<=new_sort_number){
                tmp_same_order = $(this);
              }
            }else{
              if (tmp_sort>=new_sort_number){
                tmp_same_order = $(this);
                return false;
              }
            }
          });
          if (new_sort_number>max_number){
            tmp_same_order.parents('tr').eq(0).after($(this).parents('tr').eq(0));
          }else{
            tmp_same_order.parents('tr').eq(0).before($(this).parents('tr').eq(0));
          }
        }else{ //desc
          //ex. 5 3 2 1,insert 4
          $.each(pool,function(){
            var tmp_sort = parseFloat($(this).val());
            if (new_sort_number<min_number){
              if (tmp_sort>=new_sort_number){
                tmp_same_order = $(this);
              }
            }else if (new_sort_number>max_number){
              if (tmp_sort<=new_sort_number){
                tmp_same_order = $(this);
                return false;
              }
            }else{
              if (tmp_sort<=new_sort_number){
                tmp_same_order = $(this);
                return false;
              }
            }
          });
          if (new_sort_number<min_number){
            tmp_same_order.parents('tr').eq(0).after($(this).parents('tr').eq(0));
          }else{
            tmp_same_order.parents('tr').eq(0).before($(this).parents('tr').eq(0));
          }
        }
      }
      update_sort();
    });
  }
  $(document).ready(function(){
    $('#update_sort_button').click(update_sort);
    $('#enable_manually_sort').change(function(){
      $(this).parents('form').submit();
    })
    sortable();
  });
</script>