jquery cookie плагин: сохранение позиций различных элементов с одинаковым классом?

Question

У меня есть некоторые элементы перетаскивания, которые можно перетаскивать вертикально в моем теле.

$("ul.bars li").draggable({ containment: "body"});

чтобы пользователь мог перетаскивать предметы куда угодно. Теперь я хочу сохранить положение каждого элемента с помощью плагина jquery cookie.

когда страница перезагружается, я хочу снова поместить каждый элемент в сохраненную позицию.

поэтому, когда перетаскивание останавливается, я сохраняю cookie:

$("ul.bars li").draggable({
    stop: function(event, ui) {
        var currentPos = $(this).position();
        $.cookie('position', currentPos.top );
    }
});

и когда страница перезагружается (готов), я просматриваю каждый элемент и запрашиваю последнюю позицию, сохраненную в куки.

$(function() {
    $("ul.bars li").each(function() {
        var savedPosition = $.cookie('position');
        $(this).css({ top: savedPosition });        
    });
});

это моя основная идея, однако я понятия не имею, как сохранить отдельный файл cookie для каждого элемента, чтобы можно было различить позицию. В настоящее время я перезаписываю один и тот же файл cookie каждый раз, когда перетаскиваю элемент.

как я могу добавить какую-то различимую переменную, чтобы расположить каждый элемент в той же позиции, в которой он оставался до перезагрузки страницы? любая творческая идея, как решить это?

спасибо

Answer 1

$("ul.bars li").draggable({
    stop: function(event, ui) {
        var currentPos = $(this).position();
        $.cookie('position' + $(this).index(), currentPos.top );
    }
});

$(function() {
    $("ul.bars li").each(function() {
        var savedPosition = $.cookie('position' + $(this).indeX());
        $(this).css({ top: savedPosition });        
    });
})