I'm trying use jquery-ui sortable connected lists and persist sorting changes in a Rails app.
- Lists have many tasks.
- Lists can be sorted among each other - works.
- Tasks can be sorted among each other - works.
- Tasks can moved between lists - does not work correctly:
<div class="list-sortable connectedSortable" style="cursor: grab;">
<% @lists.each do |list| %>
<%= content_tag "div", id: "list-#{list.id}", data: { model_name: list.class.name.underscore, update_url: list_sort_path(list)} do %>
<%= render 'lists/list_preview', list: list %>
<div class="task-sortable connectedSortable" style="cursor: grab;">
<% list.tasks.rank(:row_order).each do |task| %>
<%= content_tag "div", id: "task-#{task.id}", data: { model_name: task.class.name.underscore, update_url: list_task_sort_path(list, task)} do %>
<%= render 'tasks/task_preview', task: task %>
<% end %>
<% end %>
</div>
<% end %>
<% end %>
</div>
require("jquery-ui-dist/jquery-ui");
$(document).on('turbolinks:load', function(){
$('.list-sortable').sortable({
cursor: "grabbing",
//cursorAt: { left: 10 },
placeholder: "ui-state-highlight",
update: function(e, ui){
let item = ui.item;
let item_data = item.data();
let params = {_method: 'put'};
params[item_data.modelName] = { row_order_position: item.index() }
$.ajax({
type: 'POST',
url: item_data.updateUrl,
dataType: 'json',
data: params
});
},
stop: function(e, ui){
console.log("stop called when finishing sort");
}
});
$('.task-sortable').sortable({
cursor: "grabbing",
//cursorAt: { left: 10 },
placeholder: "ui-state-highlight",
update: function(e, ui){
let item = ui.item;
let item_data = item.data();
let params = {_method: 'put'};
params[item_data.modelName] = { row_order_position: item.index(), list_id: item.index() };
$.ajax({
type: 'POST',
url: item_data.updateUrl,
dataType: 'json',
data: params
});
},
stop: function(e, ui){
console.log("stop called when finishing sort");
}
});
$( function() {
$( ".list-sortable, .task-sortable" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
} );
});
As I understand, the problem is in this line:
params[item_data.modelName] = { row_order_position: item.index(), list_id: ??????????? };
I can not figure out how to pass list_id
correctly (as the list.id
to which the task
was dragged)
Github repo: https://github.com/yshmarov/jquery-sortable-rails
Heroku demo: https://jquery-sortable-rails.herokuapp.com
from jquery-ui sortable - moving tasks between lists
No comments:
Post a Comment