jQuery Drag Sort for Rails 3.1 Asset Pipeline
jQuery DragSort Plugin is a list drag and sort plugin made available by and on CodePlex. jQuery List Drag Sort features list element's dragging, dropping, and saving the sorted list by user using jQuery.
jquery-dragsort-rails is a library that integrates jQuery List Drag Sort for Rails 3.1 or above Asset Pipeline.
Plugin version
- jQuery List Drag Sort Plugin v0.5.1
Installing Gem
Add this in your Gemfile:
gem "jquery-dragsort-rails"
How to use this plugin
To use this plugin follow these steps:
Refer javascript
Require jquery-dragsort in your app/assets/application.js file.
//= require jquery-dragsort
In your code:
Let's assume you are sorting products on your page, and your code looks something like this in your sort_products.html.erb template -
<%= form_tag save_order_products_path do -%>
<!-- save sort order here which can be retrieved from server on postback -->
<input id= "product_positions" name="product_positions" type="hidden" value="0" />
<div class="span2" id="save_order"></div><!-- To insert a button when list's position is changed. -->
<% end -%>
<ul id="products" class="thumbnails">
<% @products.each do |product| %>
<% unless product.pictures.blank? %>
<%= content_tag_for :li, product, :class=> "span2" do %>
<div class="span2 thumbnail" value="<%= product.id %>">
<%= image_tag(product.pictures.first.image(:small), :size => "260x180") %>
<div class="caption">
<h5><%= product.name %></h5>
<p><%= product.sku_code %></p>
<p><%= truncate(product.description, :length => 45, :separator => ' ') %></p>
</div>
</div>
<% end %>
<% end %>
<% end %>
</ul>
In your products.js.cofee file -
saveOrder = ->
data = $("#products li").map ->
$(this).children().attr("value")
.get()
$("input[name=product_positions]").val data.join(",")
$("#save_order").html '<button class="btn btn-primary"><i class="icon-ok icon-white"></i> Save</button>'
$("#products, #list2").dragsort
dragSelector: "div"
dragBetween: true
dragEnd: saveOrder
placeHolderTemplate: "<li class='placeHolder'><div></div></li>"
Thanks
Thanks to Codeplex for making list dragsort plugin available.
License
This project is released under and uses MIT-LICENSE. Go to http://dragsort.codeplex.com/license for more licensing infromation.