I've written a script allowing clients to drag elements. However, once dragged the element's position is saved within a cookie. Upon page load, the element (identified by its ID) is moved into the position given by the cookie. I could easily implement a httpRequest object allowing for the positions to be saved on your server (if desired).
<script>
window.onload = function () {
var cookies = document.cookie.split('; ');
for(var i=0; i<cookies.length; i++) {
var cookie = cookies[i];
if(cookie.match(/^position/)) {
exp = cookie.substr(8).split('=');
positions = exp[1].split('|');
document.getElementById(exp[0]).style.top = positions[0];
document.getElementById(exp[0]).style.left = positions[1];
}
}
}
document.onmouseup = function(e) {
e = e?e:window.event;
t = e.target?e.target:e.srcElement;
document.onmousemove = '';
if(t.className == 'drag') {
var date = new Date();
date.setTime(date.getTime()+1209600000);
document.cookie = "position"+t.id+"="+t.style.top+"|"+t.style.left+"; expires="+date.toGMTString()+"; path=/";
}
}
document.onmousedown = function(e) {
e = e?e:window.event;
t = e.target?e.target:e.srcElement;
if(t.className == 'drag') {
xy= e.clientY - parseInt(t.style.top);
xx= e.clientX - parseInt(t.style.left);
document.onmousemove = function uc(e) {
e = e ? e : window.event;
t.style.top = e.clientY - xy;
t.style.left = e.clientX - xx;
return false;
}
return false;
}
}
</script>Typical usage:
<img style="left: 150px; top: 150px; position: absolute;" src='example.jpg' id='example' class='drag'>
<img style="left: 150px; top: 150px; position: absolute;" src='example2.jpg' id='example2' class='drag'>
Would there be a way to make it so it is viewable to everyone else and not just the user? :)