Форум Сайтостроение Веб-строительство

Помогите немного доделать браузерный пазл

AVG88
На сайте с 26.11.2014
Offline
28
AVG88
511

Здравствуйте!

Есть примитивный браузерный пазл. Как сделать чтобы после обновления страницы положения кусочков оставалось там, куда я их расставил ранее, перед обновлением страницы?

Я так понимаю это через куки както надо реализовать? 


<html>

<head>

<script type="text/javascript">



window.onload = addListeners;



function setUpElements(id){

for (var i = 0; i < id.length; i++) {

document.getElementById(id).style.left = getCookie(id+'leftPosition');

document.getElementById(id).style.top = getCookie(id+'topPosition');

document.getElementById(id).style.position = 'fixed';

};



}



function addListeners(){



document.getElementById('head_1').onmousedown = moveElement;

document.getElementById('head_2').onmousedown = moveElement;

document.getElementById('head_3').onmousedown = moveElement;

document.getElementById('head_4').onmousedown = moveElement;

document.getElementById('head_5').onmousedown = moveElement;

document.getElementById('head_6').onmousedown = moveElement;



setUpElements(['head_1', 'head_2','head_3', 'head_4', 'head_5','head_6']);





}



function moveElement(e){

// 1. отследить нажатие

var ball = e.target;



var coords = getCoords(ball);

var shiftX = e.pageX - coords.left;

var shiftY = e.pageY - coords.top;



ball.style.position = 'absolute';

document.body.appendChild(ball);

moveAt(e);



ball.style.zIndex = 1000; // над другими элементами



function moveAt(e) {

ball.style.left = e.pageX - shiftX + 'px';

ball.style.top = e.pageY - shiftY + 'px';





}



document.onmousemove = function(e) {

moveAt(e);

};



ball.onmouseup = function() {

setCookie(ball.id  + 'leftPosition', ball.style.left, 100);

setCookie(ball.id  + 'topPosition', ball.style.top, 100);



document.onmousemove = null;

ball.onmouseup = null;

};



ball.ondragstart = function() {

return false;

};



}



function setCookie(name, value, options) {

options = options || {};



var expires = options.expires;



if (typeof expires == "number" && expires) {

var d = new Date();

d.setTime(d.getTime() + expires * 1000);

expires = options.expires = d;

}

if (expires && expires.toUTCString) {

options.expires = expires.toUTCString();

}



value = encodeURIComponent(value);



var updatedCookie = name + "=" + value;



for (var propName in options) {

updatedCookie += "; " + propName;

var propValue = options[propName];

if (propValue !== true) {

updatedCookie += "=" + propValue;

}

}



document.cookie = updatedCookie;

}



// возвращает cookie с именем name, если есть, если нет, то undefined

function getCookie(name) {

var matches = document.cookie.match(new RegExp(

"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"

));

return matches ? decodeURIComponent(matches[1]) : undefined;

}



function getCoords(elem) {

// (1)

var box = elem.getBoundingClientRect();



var body = document.body;

var docEl = document.documentElement;



// (2)

var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;

var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;



// (3)

var clientTop = docEl.clientTop || body.clientTop || 0;

var clientLeft = docEl.clientLeft || body.clientLeft || 0;



// (4)

var top = box.top + scrollTop - clientTop;

var left = box.left + scrollLeft - clientLeft;



return {

top: top,

left: left

};

}



</script>

</head>

<body align = 'center'>

        <img class="img" src="image/2.png" id="head_1" alt="" width="60px"/>

        <img class="img" src="image/3.png" id="head_2" alt="" width="60px"/>

        <img class="img" src="image/4.png" id="head_3" alt="" width="60px"/>

<br/>

        <img class="img" src="image/1.png" id="head_4" alt="" width="60px"/>

        <img class="img" src="image/6.png" id="head_5" alt="" width="60px"/>

        <img class="img" src="image/5.png" id="head_6" alt="" width="60px"/>



</body></html>
VHS
На сайте с 28.09.2007
Offline
142
VHS
#1

Непонятно чем нужно помочь... все работает согласно описанию. Возможно локально куки не ставятся просто.

И наверное, лучше делать через localstorage, хотя особой разницы нет.

AVG88
На сайте с 26.11.2014
Offline
28
AVG88
#2

Спасибо! Вы очень помогли.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий