Uchování obrázků přesunutých uživatelem na jejich místě i po refreshi stránky

Mám web (zde), na kterém je možno přetahat obrázky do políček pod nimi. Řešeno html5, javascriptem a drag and drop eventů. Potřeboval bych poradit nějakou metodu, jakou bych mohl uchovat obrázky pro daného uživatele na místě, kam je přetahal.

Jak bych toho mohl docílit, prosím?

Zkoušel jsem metodu předání ajaxem proměnné s názvem obrázku do presenteru (kód níže), ale nefunguje mi, tak hledám jinou možnost.

<script>
		var data = null;
		var currentID = null;
		var test = "ahoj mami";

        function allowDrop(ev) {
            if(ev.preventDefault)
                ev.preventDefault();
        }

        function drop(ev) {
            if(ev.preventDefault)
                ev.preventDefault();

            var data = ev.dataTransfer.getData("picture");
            var actDiv = ev.target.id;
            if(actDiv == "background-music" && currentID != "content-music")
            	div.style.border="2px solid red";
            else
            	ev.target.appendChild(document.getElementById(data));

            $.ajax({
			        type: 'POST',
			        url: {link processAjax!},
			        data: test,
			        error: function(){
						alert("Theres an error with AJAX.");
					}
			});
        }

        function dragStart(ev) {
            this.style.opacity = '0.4';

            ev.dataTransfer.setData("picture", ev.target.id);
            currentID = ev.target.id;
        }

        function dragEnter(ev) {
			this.style.border="2px dashed black";
        }

        function dragLeave(ev) {
            this.style.border="2px solid #ccc";
        }

        function dragEnd(ev) {
            this.style.opacity = '1';

            [].forEach.call(divs, function (div) {
                div.style.border="2px solid #ccc";
            });
        }


        var divs = document.querySelectorAll('.dropdiv');
        [].forEach.call(divs, function(div) {
            div.addEventListener('dragover', allowDrop, false);
            div.addEventListener('drop', drop, false);
            div.addEventListener('dragenter', dragEnter, false);
            div.addEventListener('dragleave', dragLeave, false);
        });

        var imgs = document.querySelectorAll('.content');
        [].forEach.call(imgs, function(img) {
            img.addEventListener('dragstart', dragStart, false);
            img.addEventListener('dragend', dragEnd, false);
        });
	</script>

Editoval 2rec (7. 4. 2014 21:04)