CODEWITHSUNDEEP
jquerypositionsavedraggable
Michael Joseph Aubry
Michael Joseph Aubry

Reputation: 13402

jQuery draggable, save the position after reloaded page?

I did a ton of research but I need a more personalized answer, I am pretty positive saving the draggable values requires a cookies solution, unlike jQuery .slider where you can save values like this

   //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...

From my research .draggable does not work in the same fashion, it requires cookies?

If thats true, can someone explain how to use cookies in the most clean way possible, I just want to save top, right, left, bottom values...

Here is my draggable function

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


});

I want to say its as simple as writing something similar to how I get the value of the slider

    $( ".static_preview_image" ).css({height: $("input.slider-value").val()});

but I think I need the use of cookies...

Upvotes: 0

Views: 1536

Answers (1)

Lochemage
Lochemage

Reputation: 3974

Two methods: First, cookies will work as they persist between page refreshes. Second, if you are using PHP you can use the clients session data from the server side to remember it, but this method requires you to send data (through ajax or something similar) from the client after they move the item to the server to notify of the new position so it can remember it.

EDIT: A comment above about using localstorage sounds like an excellent method, I would try that first.

Upvotes: 1

Related Questions