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 );
    }
});

当页面重新加载（dom ready）时，我遍历每个元素并查询cookie中保存的最后位置。

$(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 });        
    });
})

jquery cookie插件：保存同一类的各种元素的位置？

1 个答案: