HTML5 Scortable сортировка и вызов ajax для изменения состояния

Question

Я работал над приложением todo, чтобы учиться. Я построил приложение todo с состоянием на рельсах. это выглядит так

У меня была кнопка для изменения состояния задач. Но я хочу сделать перетаскивание. Так что я возился с сортируемой библиотекой html5. Я перешел на перетаскивание в состоянии задачи, что означает перетаскивание в пределах задачи, либо в процессе, либо в процессе. Но я не могу перетаскивать между состояниями и переходить в соответствующее состояние.

Мне нужна помощь в понимании, а не просто руководство о том, как это сделать. я приложил свои коды ниже,

контроллер

def change
    @task.update_attributes(state: params[:state])
    respond_to do |format|
        format.html { redirect_to tasks_path, notice: 'Task updated' }
    end
end

Посмотреть

<div class="row">
  <div class="col-lg-4 sortable1"><h2 class="text-center">Todo</h2>
    <% @to_do.each do |task| %>
    <div class="<%= task.state == 'to_do' ? 'card card-outline-info' : task.state == 'in_progress' ? 'card card-outline-success' : 'card card-outline-warning'  %>" style="max-width: 20rem;" id="<%= task.id %>">
      <div class="card-header action-box">
        <div class="text-xs-left">
          <strong><%= link_to task.title, edit_task_path(task)%></strong>
        </div>
          <div class="btn btn-secondary btn-sm">
            <i class="fa fa-play-circle" aria-hidden="true"></i>
          </div>
      </div>
    </div>
    <%end%>
  </div>

  <div class="col-lg-4 sortable2"><h2 class="text-center">In Progress</h2>
    <% @in_progress.each do |task| %>
    <div class="<%= task.state == 'to_do' ? 'card card-outline-info' : task.state == 'in_progress' ? 'card card-outline-success' : 'card card-outline-warning'  %>" style="max-width: 20rem;" id="<%= task.id %>">
      <div class="card-header action-box">
        <div class="text-xs-left">
          <strong><%= link_to task.title, edit_task_path(task)%></strong>
        </div>
          <div class="btn btn-secondary btn-sm">
            <i class="fa fa-play-circle" aria-hidden="true"></i>
          </div>
      </div>
    </div>
    <%end%>
  </div>


  <div class="col-lg-4 sortable3"><h2 class="text-center">Done</h2>
    <% @done.each do |task| %>
    <div class="<%= task.state == 'to_do' ? 'card card-outline-info' : task.state == 'in_progress' ? 'card card-outline-success' : 'card card-outline-warning'  %>" style="max-width: 20rem;" id="<%= task.id %>">
      <div class="card-header action-box">
        <div class="text-xs-left">
          <strong><%= link_to task.title, edit_task_path(task)%></strong>
        </div>
          <div class="btn btn-secondary btn-sm">
            <i class="fa fa-play-circle" aria-hidden="true"></i>
          </div>
      </div>
    </div>
    <%end%>
  </div>
</div>

Маршруты

  resources :tasks do
    member do
      put :change
    end
  end

Javascript

var ready;
var id = $(this).attr("id");
ready = function(){
    // call sortable on our div with the sortable class
    $('.sortable1').sortable();
    $('.sortable2').sortable();
    $('.sortable3').sortable();
    $.ajax({
        type: "PUT",
        url: '/tasks/' + id + '/change',
        data: { order: updated_order }
    });
}

$(document).ready(ready);
/**
 * if using turbolinks
 */
$(document).on('page:load', ready);

ОБНОВИТЬ

Получил работу, чтобы перейти к следующему состоянию, как это

Javascript

var ready;
var id = $(this).attr("task_id");
ready = function(){
    // call sortable on our div with the sortable class
    $('#sortable1').sortable(
      {
      connectWith: ".connected"
    }
    );
    $('#sortable2').sortable({
      connectWith: ".connected"
    });
    $('#sortable3').sortable({
      connectWith: ".connected"
    });
    $.ajax({
        type: "PUT",
        url: '/tasks/' + id + '/change'
    });
}

$(document).ready(ready);
/**
 * if using turbolinks
 */
$(document).on('page:load', ready);

Посмотреть

<div class="row">
  <div class="col-lg-4"><h2 class="text-center">Todo</h2>
    <ul id="sortable1" class="connected sortable list">
    <% @to_do.each do |task| %>
    <li>
    <div class="<%= task.state == 'to_do' ? 'card card-outline-info' : task.state == 'in_progress' ? 'card card-outline-success' : 'card card-outline-warning'  %>" style="max-width: 20rem;" task-id="<%= task.id %>">
      <div class="card-header action-box">
        <div class="text-xs-left">
          <strong><%= link_to task.title, edit_task_path(task)%></strong>
        </div>
          <div class="btn btn-secondary btn-sm">
            <i class="fa fa-play-circle" aria-hidden="true"></i>
          </div>
      </div>
    </div>
  </li>
    <%end%>
    </ul>
  </div>

  <div class="col-lg-4"><h2 class="text-center">In Progress</h2>
    <ul id="sortable2" class="connected sortable list">
    <% @in_progress.each do |task| %>
    <li>
    <div class="<%= task.state == 'to_do' ? 'card card-outline-info' : task.state == 'in_progress' ? 'card card-outline-success' : 'card card-outline-warning'  %>" style="max-width: 20rem;" task-id="<%= task.id %>">
      <div class="card-header action-box">
        <div class="text-xs-left">
          <strong><%= link_to task.title, edit_task_path(task)%></strong>
        </div>
          <div class="btn btn-secondary btn-sm">
            <i class="fa fa-play-circle" aria-hidden="true"></i>
          </div>
      </div>
    </div>
  </li>
    <%end%>
    </ul>
  </div>


  <div class="col-lg-4"><h2 class="text-center">Done</h2>
    <ul id="sortable3" class="connected sortable list">
    <% @done.each do |task| %>
    <li>
    <div class="<%= task.state == 'to_do' ? 'card card-outline-info' : task.state == 'in_progress' ? 'card card-outline-success' : 'card card-outline-warning'  %>" style="max-width: 20rem;" task-id="<%= task.id %>">
      <div class="card-header action-box">
        <div class="text-xs-left">
          <strong><%= link_to task.title, edit_task_path(task)%></strong>
        </div>
          <div class="btn btn-secondary btn-sm">
            <i class="fa fa-play-circle" aria-hidden="true"></i>
          </div>
      </div>
    </div>
  </li>
    <%end%>
    </ul>
</div>

Но он не будет переходить к следующему ul, если ul не имеет пустого списка, он просто перемещается, только если ul другого состояния уже имеет элемент li