jQuery를 사용하여 탭 + 필드 정렬 및 저장 정렬 가능

Question

탭을 정렬하고 탭 안의 필드를 정렬하려고합니다. 하나의 탭에서 다른 탭으로 필드를 드래그 할 수 있기를 원합니다.

저장 버튼을 사용자가 클릭 내가 JSON 문자열을 얻으려면

. 다음과 유사한 :

제가 조사를 좀 해봤 그것 (탭 목록을 연결) jQuery를 정렬 가능한을 사용 가능하다는 것을 보인다. 누군가가 HTML + 자바 스크립트 괜찮은 조각을 게시 할 수 있습니까? 고맙습니다.

내가 작성한 다음 코드는 재앙입니다.

$(function() { 
    $("#tabs").tabs().find(".ui-tabs-nav").sortable({ 
     axis: "x", 
     update: function(event, ui) { 
      debugger; 
     } 
    }); 

    $(".fieldSortableList").sortable().disableSelection(); 

    var $tabs = $("#tabs").tabs(); 
    var $tab_items = $("ul:first li", $tabs).droppable({ 
     accept: ".connectedSortable li", hoverClass: "ui-state-hover", drop: function (event, ui) { 
      var $item = $(this); 
      var $list = $($item.find("a").attr("href")).find(".connectedSortable"); 
      ui.draggable.hide("slow", function() { 
       $(this).appendTo($list).show("slow"); 
      }); 
     } 
    }); 
}); 

Answer 1

정렬 가능한 바인딩을 정의 할 때 "ConnectWith"속성을 사용하십시오. 이렇게하면 항목 양식 목록 a를 목록 b로 정렬/삭제할 수 있습니다.

상태를 저장하려면 목록의 항목을 가져 와서 localStorage의 배열로 저장 한 다음 페이지를로드하는 동안 저장된 localstorage 필드와 비교할 수 있습니다. 페이지를로드 할 때 현재 목록 순서와 저장된 순서를 비교하고, 다른 경우 새 목록에 추가합니다. 완료되면 새 목록에 모든 항목이 있지만 저장된 순서대로 표시됩니다.

잠시 동안 정렬 가능한 API를 보지 못했지만이 방법도 도움이됩니다. http://johnny.github.io/jquery-sortable/