JQuery sortable 목록을 serialWise로 연결 하시겠습니까?

Question

나는 Sortable리스트에 관해 Railscast를 따라 갔다. 그리고 그것은 1 개의 sortable 한 목록에 대해 완전하게 일했다. 그러나 연결된 두 개의 정렬 가능한 목록을 만들려고하면 serialize가 요소의 ID 만 저장할 수 있다는 것을 알게되었습니다. 거기에 각 목록 요소 ID에 대한 목록의 ID를 직렬화하는 방법이 있나요? 또는 목록의 요소 부모 ID를 병합하여 결과를 직렬화 하시겠습니까?

이 대답은 jQuery-UI Sortable Connected-Lists save order and association to rails model 내가 목록에서 요소를 끌어 성공적으로 DB에 저장 관리했습니다, 그러나 하나의 목록 withing 요소를 정렬 제대로 관리하지 못했습니다.

보기

<% @project.tasks.group_by(&:column).each do |column, tasks| %> 
    <ul id='tasks_<%= column %>' data-update-url='<%= sort_project_tasks_url(@project) %>'> 
    <% tasks.sort_by! { |t| t.priority }.each do |task| %> 
     <li id="task_<%= task.id %>"> 
     <%= task.name %>| <%= column %> | <b><%= task.priority %></b> 
     </li> 
    <% end %> 
    </ul> 
<% end %> 

내가 사용했던 스크립트 일반 직렬화 변형.

jQuery -> 
    $('#tasks_done').sortable 
    connectWith: '#tasks_dev' 
    update: -> 
     $.post($(this).data('update-url'), $(this).sortable('serialize')) 

스크립트 나는 연결된 질문에서 왔습니다. 또한 목록 사이 요소를 끌기 위해 잘 작동하지만 목록 내에서 정렬은 두 번째 스크립트 변형

def sort 
    JSON.parse(params[:Activity]).each_with_index do |data, index| 
    id = data['id'] 
    priority = index + 1 
    column = data['column'] 
    column.slice! 'tasks_' # columns ids are tasks_<%= task.column %> 
    task = Task.find(id) 
    task.update_attributes(priority: priority, column: column) 
end 

업데이트, (지금은 강력한 PARAMS없이) 제대로 컨트롤러의 조치를 해당

jQuery -> 
    $('#tasks_dev').sortable 
    connectWith: '#tasks_done' 
    update: (event, ui) -> 
     neworder = new Array() 
     $(this).children().each -> 
      column = $(this).parent().attr('id') 
      id = $(this).attr('id').match(/((?!task_).)*$/)[1] 
     neworder.push(
      id: id 
     column: column 
     ) 
    $.post($(this).data('update-url'), Activity: JSON.stringify(neworder)) 

저장하지 않습니다 따라서 주요 문제는 목록간에 이동 된 요소를 추적하면서 정렬 결과를 한 목록에 저장하는 방법을 파악할 수 없습니다. 서버 측에서는 쉽게 할 수 있지만 프론트 엔드에 익숙하지 않아 클라이언트에서 params를 올바르게 구성하는 방법을 알 수 없습니다.

Answer 1

그래서 여기에 제가 생각해 낸 해결책이 있습니다. 기본적으로 목록의 ID를 얻고 결과를 sortable ('serialize')에 추가하고 게시합니다.

tasks.coffee는

jQuery -> 
    $('#tasks_done').sortable 
    connectWith: '#tasks_dev' 
    update: -> 
     $.post($(this).data('update-url'), 'column' + '=' + $(this).attr('id') + '&' + $(this).sortable('serialize')) 

jQuery -> 
    $('#tasks_dev').sortable 
    connectWith: '#tasks_done' 
    update: -> 
     $.post($(this).data('update-url'), 'column' + '=' + $(this).attr('id') + '&' + $(this).sortable('serialize')) 

tasts_controller.rb

def sort 
    column = params[:column].delete! 'tasks_' 
    params[:task].each_with_index do |id, index| 
     Task.where(id: id).update_all(priority: index + 1, column: column) 
    end 
end 

성형 PARAMS (나중에 .erb 함께 리팩토링 것이다) : http://imgur.com/a/tHNj9

(죄송합니다,하지 사진을 직접 추가 할 수있는 충분한 담당자가 있음)