jQuery draggable,重新加载页面后保存位置?

时间:2013-07-10 22:37:31

标签: jquery position save draggable

我做了大量的研究,但我需要一个更个性化的答案,我非常积极地保存可拖动的值需要一个cookie解决方案,不像jQuery .slider,你可以保存这样的值

   //jQuery UI Slider
jQuery( ".slider" ).slider({
       animate: true,
           range: "min",
           value: $("input.slider-value").val(),
           min: 50,
           max: 700,
           step: 1,

           //this gets a live reading of the value and prints it on the page
           slide: function( event, ui ) {
               jQuery( "#slider-result" ).html( ui.value );
               jQuery( ".static_preview_image" ).height( ui.value );
           },

           //this updates the hidden form field so we can submit the data using a form
           change: function(event, ui) {
           jQuery('#hidden').attr('value', ui.value);
           } 

  });

    $( ".static_preview_image" ).css({height: $("input.slider-value").val()}); //This gives my element the height of the slider, it get stored in my slider function...

从我的研究.draggable不能以同样的方式工作,它需要cookie吗?

如果这是真的,有人可以解释如何以最干净的方式使用cookie,我只想保存顶部,右侧,左侧,底部值......

这是我的可拖动功能

    $( ".MYELEMNT" ).draggable({
    containment: '#_moon_static_bg_status', // I set some containment

// Read this in another post, this outputs a live value of .MYELEMNT from the start of the drag.
start: function(event, ui) {

    // Show start dragged position of image.
    var Startpos = $(this).position();
    $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
},

// Same as above but prints the current position where MYELEMNT stops
stop: function(event, ui) {

    // Show dropped position.
    var Stoppos = $(this).position();
    $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
}


});

我想说它就像写一些类似于滑块值

的东西一样简单
    $( ".static_preview_image" ).css({height: $("input.slider-value").val()});

但我认为我需要使用cookies ......

1 个答案:

答案 0 :(得分:1)

两种方法:首先,cookie将在页面刷新之间保持不变。其次,如果您使用PHP,您可以使用服务器端的客户端会话数据来记住它,但是这种方法要求您在将项目移动到服务器以通知后从客户端发送数据(通过ajax或类似的东西)新职位,以便记住它。

编辑:上面关于使用localstorage的评论听起来像是一种很好的方法,我会先尝试一下。