adbanner-test/app/views/admin/ad_banners/show.html.erb

<% content_for :page_specific_javascript do %>
  <%= javascript_include_tag "lib/jquery-ui-sortable.min" %>
<% end %>
<% content_for :page_specific_css do %>
	<style type="text/css">
		.banner-image{
			height: 140px;
	    background-repeat: no-repeat;
		}
    .order-list{
      list-style: none;
    }
    .order-list-image i{
      font-size: 20px;
      cursor: move;
    }
    
    .order-list-image h4{
      display: inline-block;
      margin-left: 30px;
    }

   #sort-images-modal .modal-body {
      max-height: 60vh;
    }

    #sort-images-modal .modal-body .order-list-image img {
      width: 150px;
      margin: 0 0 10px 10px;
    }

	</style>
<% end %>
<h3>
  <%= @banner.title %>
  <div class="pull-right btn-group">
    <a class="btn btn-small <%= params[:show] == "expired" ? "" : "active" %>" href="<%= admin_ad_banner_path(@banner.id) %>">Not Expired</a>
    <a class="btn btn-small <%= params[:show] == "expired" ? "active" : "" %>" href="<%= admin_ad_banner_path(@banner.id, :show => "expired") %>">Expired</a>
  </div>
</h3>

<table class="table main-list">
  <thead>
    <tr class="sort-header">
      <% @table_fields.each do |f| %>
      <%= thead(f) %>
      <% end %>
    </tr>
  </thead>
  <tbody>
  <% @images.each do |image| %>
  	<tr>
  		<td>
  			<%= image_tag image.file.thumb, :class => "banner-image" %>
  		</td>
  		<td>
  			<%= image.title rescue "" %>
  			<% if can_edit_or_delete?(@banner) %>
	  			<div class="quick-edit">
		            <ul class="nav nav-pills">
		                <li><a href="<%= edit_admin_ad_image_path(image.id, :page => params[:page]) %>"><%= t(:edit) %></a></li>
		                <li><a href="<%= admin_ad_image_path(image.id, :page => params[:page]) %>" class="delete text-error" data-method="delete" data-confirm="Are you sure?" ><%= t(:delete_) %></a></li>
		            </ul>
		          </div>
		     <% end %>
  		</td>
  		<td class="span3">
  			<% if !image.postdate.nil? %>
  				<%= image.postdate.strftime("%Y-%m-%d %H:%M") rescue "" %> 
				<% if !image.deadline.nil? %>
					~ <%= image.deadline.strftime("%Y-%m-%d %H:%M") rescue "" %>
					<% if image.expired? %>
						<span class="label"><%= t("ad_banner.expired") %></span>
					<% end %>
				<% end %>
  			<% end %>
  		</td>
  		<td>
        <% if image.out_link != "" %>
  			   <a href="<%= image.out_link rescue "#" %>" target="_blank">Link</a>
        <% end %>
  		</td>
  	</tr>
  <% end %>
  </tbody>
  </table>
  
  <% if can_edit_or_delete?(@banner) %>
    <div class="bottomnav clearfix" style="left: 81px;">
      <div class="action pull-right">
        <a class="btn btn-primary" href="<%= new_admin_ad_image_path(:page => params[:page], :banner_id => @banner.id) %>">
          <%= t("ad_banner.add") %>
        </a>
        <a class="btn btn-info" href="#sort-images-modal" data-toggle="modal">Order</a>
      </div>
     <%= content_tag :div, paginate(@images), class: "pagination pagination-centered" %>
    </div>
    <!-- image order modal -->
    <div id="sort-images-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Order Images</h3>
      </div>
      <div class="modal-body">
        <ul class="order-list">
          <% @banner.ad_images.not_expired.asc(:sort_number).each do |image| %>
            <li class="order-list-image" data-image-id="<%= image.id.to_s %>">
              <i class="icons-list-2"></i>
              <img src="<%= image.file.thumb.url %>"/>
              <h4><%= image.title %>
            </li>
          <% end %>
        </ul>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary" id="save-image-order-btn">Save changes</button>
      </div>
    </div>
  <% end %>
  <script type="text/javascript">
    var sortUpdated = false;
    $("#sort-images-modal").on("shown",function(){
      $(".order-list").sortable({
        update : function(){
          sortUpdated = true;
        }
      });
    })

    $("#save-image-order-btn").on("click",function(){
      if(sortUpdated){
        var ids = [];
        $(".order-list-image").each(function(i,image){
          ids.push($(image).data("image-id"));
        })
        $.ajax({
          url : "/admin/ad_banner/save_image_order",
          data : {"ids" : ids, "banner_id" : "<%= @banner.id.to_s %>"},
          dataType : "json",
          type : "post"
        }).done(function(){
          alert("Order saved. Please refresh the page to see the changes.");
          $("#sort-images-modal").modal("hide");
        })
      }
    })

  </script>