Question

我不知道该怎么做。请帮忙。

我在网页上建立了一个可拖动可缩放项目的网站。你可以看到我在这里做了什么...... http://www.hagueandhague.co.uk/test/hagueandhague/httpdocs/index.html

它使用来自...的java脚本 http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js

我需要网站做的是记住项目的位置和规模，以便当访问者返回网站时，项目就是他们离开的地方。

我相信可以将这些信息存储在cookie中，但是我不知道如何做到这一点或使其工作。

任何帮助都会很棒，但如果是英语/非专业人士的话会更好。

提前致谢。

詹姆斯。

Answer 1

在“外行”术语中，您希望使用Draggable插件的stop回调来获取元素的位置，并使用jQuery cookie插件将其保存到cookie中。然后当用户返回时，读取cookie并重新定位元素。

$(".selector").draggable({
    stop: function(event, ui) {
        $.cookie("elementIDCookie", ui.position);
    }
});

在用户返回时重新定位元素：

$(".select").css( { "left" : $.cookie("elementIDCookie").left, "top" : $.cookie("elementIDCookie").top });

更多信息：

http://jqueryui.com/demos/draggable/

https://github.com/carhartl/jquery-cookie

Answer 2

    <script>
    $(document).ready(function(){
        $('.dragboard').draggable({
            stop: function(event, ui) {
                $.cookie('elementLeft', ui.position.left);
                $.cookie('elementTop', ui.position.top);
            }
        });
        $('.dragboard').css({left : parseInt($.cookie('elementLeft')), top : parseInt($.cookie('elementTop'))});
    });
    </script>

Answer 3

这将直接开箱即用 - ＃pick-right是要拖动的div。

     $(document).ready(function () {
         if ($.cookie("rcpos") != undefined) {
             var unwrapped = window.JSON.parse($.cookie("rcpos"));
             var left = window.JSON.parse($.cookie("rcpos")).left;
             var top = window.JSON.parse($.cookie("rcpos")).top;
             $("#pick-right").css("left", left + "px");
             $("#pick-right").css("top", top + "px");
         }
     });

     $(function () {
         $("#pick-right").draggable({ stop: function (event, ui) {
             $.cookie("rcpos", window.JSON.stringify(ui.position));
         }
         });
     });

记住cookie中的位置和大小

3 个答案: