ask/app/views/admin/asks/order_fields.html.erb

<style>
	.icons-list-2 {
    cursor: all-scroll;
  }
  .position-text-div {
    cursor: text;
    margin: -8px;
    padding: 8px;
	}
	.position-text-div:hover {
    background: aqua;
	}
</style>
<div class="order-edit-notification"><%= t("ask.please_save") %></div>
<table width="100%" id="ask_fields_order_table" class="table table-striped" class="ask_fields_table">
	<thead>
		<tr>
			<th></th>
			<th><%= t("ask.sort_number") %></th>
			<th><%= t("ask.field") %></th>
	</thead>
	<tbody>
		<% @disp_fields_infos.each_with_index do |(k, info),i| %>
			<tr data-index="<%=i%>">
				<td><span class="brand"><i class="icons-list-2"></i></span></td>
				<td class="position-text">
					<div class="position-text-div" data-value="<%= (i + 1).to_s %>"><%= (i + 1).to_s  %></div>
				</td>
				<td>
					<div class="field-text-id" data-field-id="<%= k %>"><%= info["trans"] %></div>
				</td>
			</tr>
		<% end %>
	</tbody>
</table>
<div class="bottomnav clearfix" style="left: 81px;">
    <div class="action pull-right">
    <a class="btn btn-info disabled" id="save-order-button" href="#"><%= t("ask.save_order") %></a>
    </div>
    <div class="pagination pagination-centered"></div>
  </div>
<script type="text/javascript">

	var makeEditable = function(){
		var input_box = $("<input type='text'/>"),
			el = $(this);
		input_box.addClass("editable-input");
		input_box.val(el.data("value"));
		input_box.attr("data-old-id",el.data("value"));
		input_box.on("blur",function(){
			putBackdiv($(this));
		});
		input_box.on("keypress",function(e){
			if(e.keyCode == 13 || e.keyCode == 27){
				putBackdiv($(this),e.keyCode);
			}
		})
		el.parent().html(input_box);
		input_box.focus();
	}

	var putBackdiv = function(el,keyCode){
			current_value = parseInt((el.val() == "" ? el.data("old-id") : el.val())),
			old_value = parseInt(el.data("old-id"));
			if(isNaN(current_value) || keyCode == 27){
				current_value = old_value;
			}
		if(old_value != current_value){
			var new_index_value = (current_value > old_value ? current_value + 1 : current_value - 1),
				div = $("<div class='position-text-div' data-value='" + current_value + "'>" + new_index_value + "</div>");
			div.on("click",makeEditable);
			el.parent().html(div);
			$("#save-order-button").removeClass("disabled");
			$(".order-edit-notification").slideDown();
			sortTable(el.data("old-id"),current_value);
		}else{
			var div = $("<div class='position-text-div' data-value='" + current_value + "'>" + current_value + "</div>");
			div.on("click",makeEditable);
			el.parent().html(div);
		}
	}

	var sortTable = function(changed_index,changed_to){
		var table_element = document.getElementById("ask_fields_order_table"),
			data = [],
			allRows = table_element.rows;
		for(i = 1; i < allRows.length; i++){
			var thisRow = allRows[i],
				text = thisRow.cells[1].textContent.trim(),
				hash = {};
			hash.index = parseInt(text);
			text = thisRow.cells[2].innerHTML.trim();
			if(text != "&nbsp;"){
				hash.field_name = text;
			}
			data.push(hash);
		}
		data = data.sort(function(a,b){return a.index - b.index});
		renderSortedTable(data,table_element);
	}

	var renderSortedTable = function(data,table_element){
		var allRows = table_element.rows;
		for(i = 0;i < data.length; i++){
			var thisRow = allRows[i + 1],
				current_value = i + 1;
			thisRow.cells[1].innerHTML = "<div class='position-text-div' data-value='" + current_value + "'>" + current_value + "</div>";
			thisRow.cells[2].innerHTML = data[i].field_name;
		}
		$("#ask_fields_order_table div.position-text-div").on("click",makeEditable);
	}

	$("#save-order-button").on("click",function(){
		var el = $(this);
		if(!el.hasClass("disabled")){
			var sort_number = {};
			$("#ask_fields_order_table .field-text-id").each(function(i, v){
				sort_number[$(v).data("field-id")] = i + 1;
			})
			$.ajax({
				url : "/admin/asks/update_order_fields",
				data : {"sort_number" : sort_number},
				dataType : "json",
				type  : "post"
			}).done(function(){
				el.addClass("disabled");
				$(".order-edit-notification").slideUp();
			})
		}
	})

	$("#ask_fields_order_table div.position-text-div").on("click",makeEditable);

</script>
<script>
	var th_width = {};
	$(document).ready(function(){
		$( ".table tbody" ).each(function(i,tbody){
			var table = $(tbody).parents("table").eq(0);
			table.data("index",i);
			th_width[i] = [];
			table.find("thead th").each(function(j,th){
				th_width[i].push($(th).outerWidth(true));
			})
		})
		$( ".table tbody" ).sortable({
	    revert: true,
	    axis: "y",
	    handle: ".brand",
	    start: function(event, ui){
	    	var item = ui.item;
	      var target = $(event.target);
	      var index = target.parents(".table").eq(0).data("index");
	      item.css("width",target.width());
	      item.find("td").each(function(i,td){
	      	$(td).width(th_width[index][i]);
	      })
	    },
	    stop: function(event, ui) {
	    	var item = ui.item;
	    	item.css("width","");
	    	item.find("td").css("width","");
	    },
	    update: function(event, ui) {
	    	var item = ui.item;
	      var org_index = item.data("index");
	      console.log(org_index);
	      var new_index = item.index();
	      var indices = [org_index,new_index].sort();
	      var table = item.parents(".table").eq(0);
	      table.find("tbody tr").each(function(i,tr){
	      	if(i >= indices[0] &&  i <= indices[1]){
	      		var position_text_div = $(tr).find(".position-text-div");
	      		position_text_div.text(i+1).data("value",i+1);
	      		$(tr).data("index",i);
	      	}
	      	if(i > indices[1]){
	      		return;
	      	}
	      })
	      $("#save-order-button").removeClass("disabled");
	      $(".order-edit-notification").slideDown();
	    }
	  });
	})
  $(window).resize(function(){
  	th_width = {};
		$( ".table tbody" ).each(function(i,tbody){
			var table = $(tbody).parents("table").eq(0);
			th_width[i] = [];
			table.find("thead th").each(function(j,th){
				th_width[i].push($(th).outerWidth(true));
			})
		})
  })
</script>