Save Draggable Div Position

Question

i had added a drag and move div to my website, i am using common header for each pages.

my drag and move div code as follows:

Script:

<script type="text/javascript">
    $(function() {
        $( "#draggable" ).draggable();
    });
</script>

Div:

<div class="student_avatar_header" id="draggable" title="Drag and Move...">
    Some texts...
</div>

CSS:

.student_avatar_header {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 10px;
    top: 20px;
    border-radius: 250px;
    z-index: 9998;
    box-shadow: 2px 2px 12px #008abc;
    cursor: move;
}

this drag and move function working fine, what my question is i had added this draggable Div to my header so it will appear even visit any pages my website, i just want to set a cookie function or what possible for remember last position where it dragged. for example now i am here home page, i just drag my div to page bottom, but when i go to about page this div appear not previous position, its appear default position. i need it display previous position even i visit any pages my website,

NOTE: my website have above 35 pages.

any idea.?

thanks...

Answer 1

Have a look on the following code :

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

To re-position the element when the user returns:

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