Question

How can I store the state of draggables and droppables from jquery UI into JSON? I want to save the state and retrieve them back using JSON. Is this the best way or alternate ways are also possible?

Answer 1

Use the callbackhandlers of the draggable/Droppable events to get the values which have changed.

You could save those values using localStorage/sessionStorage, so you don’t need to save the data to the server.

There is also an polyfill for the Storage API you can use for IE.

Try something like this:

$( ".yourdraggable_element" ).draggable({
   stop: function(event, ui) {
       localStorage.setItem("left",ui.position().left);
       localStorage.setItem("top",ui.position().top);
   }
});

you now can retrieve the position:

   $(".yourdraggable_element").css("left",localStorage.getItem("left"));
   $(".yourdraggable_element").css("top",localStorage.getItem("top"));

Note: this is only a starting point! E.g. you first have to check if localStorage, so please dont take this as complete solution!