쿠키 플러그인을 사용하여 UI.sortable을 만들 수 있습니다.

Question

실제로 한 사용자에게만 적용되는 스 니펫을 발견했지만 내 페이지에 코드를 적용하려고 할 때 요소를 정렬 할 수는 있지만 정렬 한 내용은 저장하지 않습니다. 이 코드의 잘못된 점을 알려주십시오.

는

var setSelector = "#sortable"; 
// set the cookie name 
var setCookieName = "listOrder"; 
// set the cookie expiry time (days): 
var setCookieExpiry = 7; 

// function that writes the list order to a cookie 
function getOrder() { 
     // save custom order to cookie 
     $.cookie(setCookieName, $(setSelector).sortable("toArray"), { expires: setCookieExpiry, path: "/" }); 
} 

// function that restores the list order from a cookie 
function restoreOrder() { 
     var list = $(setSelector); 
     if (list == null) return 

     // fetch the cookie value (saved order) 
     var cookie = $.cookie(setCookieName); 
     if (!cookie) return; 

     // make array from saved order 
     var IDs = cookie.split(","); 

     // fetch current order 
     var items = list.sortable("toArray"); 

     // make array from current order 
     var rebuild = new Array(); 
     for (var v=0, len=items.length; v<len; v++){ 
       rebuild[items[v]] = items[v]; 
     } 

     for (var i = 0, n = IDs.length; i < n; i++) { 

       // item id from saved order 
       var itemID = IDs[i]; 

       if (itemID in rebuild) { 

         // select item id from current order 
         var item = rebuild[itemID]; 

         // select the item according to current order 
         var child = $("ul" + setSelector + ".ui-sortable").children("#" + item); 

         // select the item according to the saved order 
         var savedOrd = $("ul" + setSelector + ".ui-sortable").children("#" + itemID); 

         // remove all the items 
         child.remove(); 

         // add the items in turn according to saved order 
         // we need to filter here since the "ui-sortable" 
         // class is applied to all ul elements and we 
         // only want the very first! You can modify this 
         // to support multiple lists - not tested! 
         $("ul" + setSelector + ".ui-sortable").filter(":first").append(savedOrd); 

       } 
     } 
} 

     // here, we allow the user to sort the items 
     $(setSelector).sortable({ 
       cursor: 'move', 
       items: 'li', 
       //axis: "y", 
       opacity: 0.6, 
       //revert: true, 
       scroll: true, 
       scrollSensitivity: 40, 
       placeholder: 'highlight', 
       update: function() { getOrder(); } 
     }); 

     // here, we reload the saved order 
     restoreOrder(); 

그것은 그냥 저장하지 않습니다 내가 정렬하고 모든 것을 할 수 있습니다 (I 또 다른 질문이 아니라 내에서 복사). 이것은 내 마크 업이다. 나는 모든 것을 테스트 목적으로 단순하게 유지하려고 노력한다.

<ul id="sortable"> 
<li>test 1</li> 
<li>test 2</li> 
</ul> 

당신은 쿠키를 저장하고 내가 새로 고칠 때 저장된 설정을 다시로드하려면이 코드를 수정할 수 있습니다하십시오. 나는이 하나를 위해 필사적이다 :))

Thank you!

Answer 1

당신은 예를 들어 각 <li>

에 ID를 넣어해야합니다

또한

<ul id="sortable"> 
<li id="item-1">test 1</li> 
<li id="item-2">test 2</li> 
    </ul> 

, 당신이 });

과 끝 부분에 코드를 닫을 수 있도록