There are various ways to drag and drop or move or change positions of items.
Here I am listing 2 scenarios using Query.
Lets start it with the following basic steps:
1) Download Download jQuery (version 1.2 or above), then the TableDnD plugin from GitHub (current version 0.6).
2) Reference both scripts in your HTML page in the normal way.
3) Initialize the tables is in the
$(document).ready function. Use a selector to select your table and then call tableDnD().First scenario: (Using JQuery )
After following above steps HTML page will look like:
<%= javascript_include_tag 'jquery.js', 'jquery.tablednd.0.6.min.js', 'jquery.tablednd.js' %>
<h1>Listing Softwares</h1>
<div class="createHeaderApp"> <h3>Softwares...</h3> </div>
<div class="titleWide"></div>
<div class="jobsHeader">
<div class='clearfloat'></div>
<div style="width:595px; float:left;">Name</div>
<div style="width:70px; float:left;">Show</div>
<div style="width:70px; float:left;">Edit</div>
<div style="width:70px; float:left;">Delete</div>
<div class='clearfloat'></div>
</div>
<table id="softwares">
<tbody class="appsHeader1" style="overflow:hidden;">
<% @softwares.each do |software| %>
<tr class="<%= cycle("even", "odd") -%>" style="font-size:12px; width:875px; "id="soft-<%= software.id %>">
<td style="width:595px; float:left;"><%= software.name %></td>
<td style="width:70px; float:left;"><%= link_to 'Show', software %></td>
<td style="width:70px; float:left;"><%= link_to 'Edit', edit_software_path(software) %></td>
<td style="width:70px; float:left;"><%= link_to 'Delete', software, :confirm => 'Are you sure?', :method => :delete %></td>
<td class='clearfloat'></td>
</tr>
<% end %>
</tbody>
</table>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Initialise the table
$("#softwares").tableDnD();
});
</script>
Now run server, execute application and test it.(Using above code you can now move or change position of list items with internal links or data.)
Second scenario:(Using JQuery & AJAX function )
If you want to save/update the positions of moving items in the database then you have to call AJAX function like below:
1)Generate migration to add new integer field "position" into softwares table
rails g migration add_position_to_softwares
2)Change
$(document).ready function like below:<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#softwares').tableDnD({
onDrop: function(table, row) {
$.ajax({
type: "POST",
url: "<%= url_for(:action => 'sort') %>",
processData: false,
data: $.tableDnD.serialize() + '&authenticity_token=' + encodeURIComponent('<%= form_authenticity_token if protect_against_forgery? %>'),
success: function(msg) {
alert("The specifications have been updated")
}
});
}
})
})
</script>
3)Change routes.rb abd add new action into your route file.
match "/sort" => "softwares#sort"
4)Add new definition "sort" into specified controller, for me its softwares_controller.rb
def sort
Software.all.each do |soft|
if position = params[:softwares].index(soft.id.to_s)
soft.update_attribute(:position, position + 1) unless soft.position == position + 1
end
end
render :nothing => true, :status => 200
end
Software.all.each do |soft|
if position = params[:softwares].index(soft.id.to_s)
soft.update_attribute(:position, position + 1) unless soft.position == position + 1
end
end
render :nothing => true, :status => 200
end
The controller iterates over all the softwares, checking the position in the db (see the acts_as_list plugin) versus the position in the array that was sent in the request. For the items that are affected, it updates the position in the db. Since we are only calling this action via AJAX, we just render nothing and indicate a successful status.
5)Now restart server and test application.
