Drag drop, save position

I need a code like this for my Habbo Home script.

I need it so you can drag the DIV layer around and then either click a button to save the co-ords or it just saves them when the layer is moved. I guess it could be done using cookies aslong as it is done effitiently.

Create a link, run a function.
use the function to getbyid the dragable layer, and save its x y co ords somewhere, on load, set them by when its generated as the top and left css paramiters.
Easy as pie. although the script works from position relative, not absoulte positioning, so you should choose one and stick with it.

Quote:

---

Originally Posted by nets

Does it have to be saved permanently, or could it be saved in a cookie (positions would be lost once the user clears their cookies)? It would be easier and more efficient to use cookies, if that's a viable option.

---

Cookie would be great just warn the user it will go back to it's normal state once cleared their cookies. :)

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

Code:

---

<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:

HTML Code:

---

<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'>

---

Quote:

---

Originally Posted by nets

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

Code:

---

<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:

HTML Code:

---

<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? :)

Do you mean, so other people can view it but not edit it?

Quote:

---

Originally Posted by nets

Do you mean, so other people can view it but not edit it?

---

Yes. Would it be hard? :S

No, but I'm assuming you would need to have some form of a user system.

so a new habbo home tbh?

Quote:

---

Originally Posted by nets

No, but I'm assuming you would need to have some form of a user system.

---

I have a very simple one. :)