Hello everyone, I can’t make cookies work properly for boxes that are sorted using the jquery-ui sortable plugin. Here is the html code

<div class="articlePreviewBox"> <div id="block-teaserBox-teaserboxes" class="clear-block block block-teaserBox"> <div class="content"> <div class="boxes small future" id="engineering"> <div class="boxes-head clearfix"> <h2 class="sifr-head-link_"><a href="#">Engineering</h2><a class="handle"></a><a href="#">View All</a> </div> </div> <div class="boxes small future" id="events"> <div class="boxes-head clearfix"> <h2 class="sifr-head-link_"><a href="#">Events</h2><a class="handle"></a><a href="#">View All</a> </div> </div> <div class="boxes small future" id="future"> <div class="boxes-head clearfix"> <h2 class="sifr-head-link_"><a href="#">Future</h2><a class="handle"></a><a href="#">View All</a> </div> </div> <div class="boxes small future" id="heritage"> <div class="boxes-head clearfix"> <h2 class="sifr-head-link_"><a href="#">Heritage</h2><a class="handle"></a><a href="#">View All</a> </div> </div> </div> </div> </div>

Here is the code for the cookies (plug-in for cookies is connected)

 jQuery(document).ready(function(){ jQuery('.articlePreviewBox').sortable({ handle:'.handle', helper: "clone", containment: '.articlePreviewBox', revert:true, scroll:true, scrollSensitivity: 100, scrollSpeed:10, cursor:'move', tolerance:'pointer', items:'.small', start: function(e, ui) { ui.placeholder.html(ui.item.html()); ui.placeholder.css({ 'visibility': 'visible', 'opacity': 0.3 }); } }); //SAVE LEFT-COLUMN ORDER TO COOKIE var setSelector = ('.articlePreviewBox'); var setCookieName = "listOrder1"; var setCookieExpiry = 7; function getOrder() { jQuery.cookie(setCookieName, jQuery(setSelector).sortable("toArray"), { expires: setCookieExpiry, path: "/" }); } function restoreOrder() { var list = jQuery(setSelector); if (list == null) return var cookie = jQuery.cookie(setCookieName); if (!cookie) return; var IDs = cookie.split(","); var items = list.sortable("toArray"); 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++) { var itemID = IDs[i]; if (itemID in rebuild) { var item = rebuild[itemID]; var child = jQuery(setSelector+" .block-teaserBox .content").children("#" + item); var savedOrd = jQuery(setSelector+" .block-teaserBox .content").children("#" + itemID); child.remove(); jQuery(setSelector+" .block-teaserBox .content").filter(":first").append(savedOrd); } } } jQuery('.articlePreviewBox').sortable({ update: function() { getOrder(); } }); restoreOrder(); });

The code itself somehow strangely works, it saves the position, it does not save, I just can’t deal with it, I hope for your help.

    1 answer 1

    False alarm: for one unit, the engine generated an incorrect id = "modern cars", because of this space, there was an error, and everything works this way.