JQuery와 JQuery와 - UI를 정렬 배열

Question

누군가는이 일 좀 도와 주시겠습니까 : 나는 UI Sortables 대부분의 사람들을 넘어 뭔가 경우이 경우 사람들이 그것을 놓친 단지와 나보고 다시 게시하고

- 그래서 사전에 사과 : BigG에 대한 상당한 연구 끝에, 여기 저기에 게시하면서 나는 아직도 더 가까운 곳에서 대답을 얻거나 얻거나 더 이해할 수있는 것을 보지 못했습니다. OK 나는 내가 집에 돌아온 것을 인정한다. PHP, CSS, HTML 등등. js/Jquery. 그래서 나는 항상 내가 이해할 수있는 것들/설명을 찾고있다. 안타깝게도 JQuery의 경우 튜토리얼 등의 99 %가 내가 이해할 수없는 방식으로 작성된 것으로 보인다. 다른 포럼 등의 게시물을 기반으로합니다. 나는 "인형"을 찾고 있습니다. 혼자가 아니란 것을 알고 있습니다. http://jqueryui.com/demos/sortable/#event-update - http://jqueryui.com/demos/sortable/#method-toArray - http://jqueryui.com/demos/sortable/#method-serialize과 같은 "도움말"항목을 보지 말아주세요. 저 같은 사람들에게 도움이되는 항목이 아니므로. 내가 다른 지위에서 말했듯이 그들은 "화성"이다.

UISortables를 사용할 때 - 어디에서 "serialize"를 JQuery 함수에 넣을 수 있습니까?

4 개의 클래스 '.columm'이 있고 각각 고유 한 ID - col1, col2, col3이 있습니다. & col4와 같습니다.

<div class="column" id="col1(to col4)"> 

는

이 로렘 입숨 슬픔이 AMET 앉아 consectetuer의 adipiscing의 ELIT

내가 드래그를 얻을 수 피드 consectetuer의 adipiscing의 ELIT, LOREM의 Ipsum 제품의 슬픔은 AMET 앉아 피드 & 드롭 비트 작동하려면 이제 "최종"po 넣어야합니다. 직렬화 된 배열로 이동합니다.

$(".column").sortable({ 
     revert: true, 
     scroll: true, 
     appendTo: 'body', 
     connectWith: '.column', 
     delay:200, 
     stop: function() { 
     $(".column").each(function(){ 
     var test = $(this).attr('id'); 

    alert(test); 

    // 
     //var myArray = $(this).sortable("serialize"); 

     }) 
    }, 
    revertDuration:50000, 
    scope:'scope', 
    opacity: 0.80, 
}); 

당신은 경고 시험을 볼 수 :

여기 내 코드입니다. 나는이 ID를 얻을 수 있는지 알기 위해이 작업을 수행했다.하지만 할 수있는 일은 무엇일까요?

.sortable ("serialize", [options]) 어떻게할까요? 하나의 직렬화 된 배열을 만드는 컬럼?

이렇게하면 페이지를로드 할 때 순서를 어떻게 설정합니까? 난 당신이 정렬이 정지 할 때 직렬화 된 문자열을 잡아하려는 같은데요

Answer 1

감사 -

도와주세요 (OK 그래, 나는 "저장"직렬화 된 배열에 의도을)? 또는 제출 버튼을 추가 하시겠습니까?

내가 a demo을 게시하고, 그것을 할 그 방법을 모두 다루려고, 나는 그것이 도움이되기를 바랍니다 :

이

$(function() { 
    $("#sortable").sortable({ 
     revert: true, 
     scroll: true, 
     appendTo: 'body', 
     connectWith: '.column', 
     delay:200, 
     stop: function(){ $(':button').trigger('click') }, 
     revertDuration:50000, 
     scope:'scope', 
     opacity: 0.80, 
    }); 

    $(':button').click(function(){ 
     var string = $("#sortable").sortable("serialize"); 
     alert(string); 
    }) 

}); 

Answer 2

대답은 이상 작동하지 않습니다! 적어도 여러 열을 사용하여 해당 메서드를 올바르게 작동시키지 못했습니다. 위에 링크 된 데모 퍼지 (fudgey)와 같은 단 하나의 목록에만 효과적입니다.다음과 같이 서버 측을 구문 분석 할 수

$(".column").sortable({ 
    connectWith: '.column', 
    update: function(event, ui){ 

     var out = ""; 

     $('.column').each(function(index){ 
      out += '{'; 
      out += $(this).attr('id') + ':'; 
      $("div", this).each(function(index){ 
       out += '{'; 
       out += $(this).attr('id') + ':';    
       out += '}'; 
      }); 
      out += '}'; 
     }); 

     alert(out); 

    } 
}); 

이 출력됩니다 뭔가 : 미래 사용자의 참고로

, 당신은 원하는 효과를 달성하기 위해 같은 것을 할 필요가

을

{column_1 : {wid_1 :} {wid_4 :} {wid_5 :} {wid_2 :} {wid_3 :}} {column_2 : {wid_6 :} {wid_7 :} {wid_8 :} {wid_9 :}} { column_3 : {wid_11 :} {wid_10 :} {wid_12 :}}

Answer 3

$('#ul').sortable({ 
         opacity: 0.5, 
         items: '> li', 
         update: function(event, ui) { 
          var new_order = $(this).sortable('toArray'); 

          var o = { 
           ids: {} 
          }; 
          for (i = 0; i < new_order.length; i++) { 
           if (new_order[i] !== undefined) { 
            o.ids[i] = new_order[i]; 
           } 
          } 

          console.log(o); 
         } 
        });