Why is the draggable operation available only once when using localstorage and stop:?

Question

I am tring to make a movable sharebox, and i want to memorize the position in wich the user locates the sharebox with localstorage or cookie. But my problem is that after the first drag you cannot drag the box again. And also i cannot use the ui.position().left command. It wont return anything.

html code:

<div id="draggable" class="ui-widget-content">Drag me around</div>

script

function local_storage()
{
    var test = 'test';
    try 
    {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } 
    catch(e) 
    {
        return false;
    }
}
$( "#draggable" ).draggable({
    stop: function(event, ui) {
    if (local_storage() === true)
    {
        var Stoppos = $(this).position();
        localStorage.setItem('left', Stoppos.left);
        localStorage.setItem('top', Stoppos.top);
        //localStorage.setItem('left',  ui.position().left);
        //localStorage.setItem('top', ui.position().top);
        setCookie('sharebox','',-1);
    }
    else 
    {
        //setCookie('sharebox', top, ui.position().top);
        //setCookie('sharebox', left, ui.position().left);
        setCookie('sharebox', top, Stoppos.top);
        setCookie('sharebox', left, Stoppos.left);
    }
    }
});

I made a jsfiddle for example: http://jsfiddle.net/maguse/4x8jeo0x/ Can anyone tell me why it stops and how to make it work? Thank you

Welcome to StackOverflow. If you're using code from another [answer](http://stackoverflow.com/a/16427747/2333214) or source, It's a good itea to link to the source and give credit to the actual author. [Plagarism](http://meta.stackoverflow.com/questions/251389/when-is-using-an-other-posters-content-plagiarism) is [not well accepted](http://meta.stackexchange.com/questions/160071/what-to-do-when-plagiarism-is-discovered) by [this community](http://meta.stackexchange.com/questions/122056/should-i-flag-plagiarism-for-moderator-attention) as far as i know... — T J, Oct 08 '14 at 18:17
I am not plagiating, I wrote this code for the site I am makeing and it is still in progress.It is a compilation of a few sites (~7). — Magurean Dan Sergiu, Oct 08 '14 at 21:39
I said if you are... BTW, the code which checks for local storage is exactly the same as the answer i mentioned.. — T J, Oct 09 '14 at 04:38

score 0 · Accepted Answer · edited Oct 08 '14 at 18:01

0

You can either ship your own funcion to set cookies or use jQuery cookie plugin.

Instead of saving multiple items, you can directly save the entire position object and retrieve it as shown below:

var lastPosition = JSON.parse(localStorage.getItem("lastPosition")) || JSON.parse($.cookie("lastPosition"))
if (lastPosition) {
  $("#draggable").css({
    "position": "absolute",
        "top": lastPosition.top,
        "left": lastPosition.left
  });
}
$("#draggable").draggable({
  stop: function (event, ui) {
    if (typeof localStorage)
        localStorage.setItem('lastPosition', JSON.stringify($(this).position()));
    else 
        $.cookie('lastPosition', JSON.stringify($(this).position()));
  }
});

Updated fiddle

edited Oct 08 '14 at 18:01

Community

1
1

answered Oct 08 '14 at 17:26

T J

42,762
13
83
138

On Chrome the draggable wont budge, and in IE I got this error message:"Message: Object doesn't support this property or method". It points to the first line of your code. Any ideas? – Magurean Dan Sergiu Oct 08 '14 at 21:50
From what I saw now the problem is if there is no cookie or localstorage data (like the first time someone enters the site). – Magurean Dan Sergiu Oct 08 '14 at 22:08
Eliminated the localstorage and left only the cookie.The cookie part does not work either, it does not store anything. – Magurean Dan Sergiu Oct 08 '14 at 22:38
@MagureanDanSergiu I tested the fiddle in chrome 28 as well as the latest version, and it's working fine... What version of IE are you using..? – T J Oct 09 '14 at 04:41
IE 8.0.7601 and CHROME 37.0.2062.120. What seemed to work was to replace the first line in your code with `if (typeof localStorage) {var lastPosition = JSON.parse(localStorage.getItem("lastPosition"))} else {var lastPosition = JSON.parse($.cookie("lastPosition"))}` – Magurean Dan Sergiu Oct 09 '14 at 10:45
@MagureanDanSergiu the fiddle i shared is working fine in chrome as it is, unless you've a sandboxed environment where `localStorage` is disabled... cookies can be disabled as well... anyway, that's a different topic.. http://stackoverflow.com/help/someone-answers – T J Oct 09 '14 at 10:50

Why is the draggable operation available only once when using localstorage and stop:?

1 Answers1

Updated fiddle