Move divtag and store position in database?

Question

Hi, I want users on my website to be able to "move" div tags once they are 'unlocked' and then for a php script to store the positions in mysql database. So once the user re-logs in the div tags are positioned in the correct place.

I know how to postion div tags in css, and am using php varibles within css to pull the data from the database. I just dont know how to get the position of the div tag in order to store it? Maybe using ajax or something?

any ideas welcome, thanks.

Answer 1

What do you mean by position? Is it "left, right, center..." or the position in pixels?

If it's in pixels, just use the top and bottom css property. If it's a custom position, just do a callback when you change the position.

You can easily get the position using javascript and once you have it you want to save that asynchronously, so yeah ajax is nice. Look up jquery for that one: http://docs.jquery.com/Ajax/jQuery.post

$.post("test.php", { func: "getNameAndTime" },
  function(data){
    alert(data.name); // John
    console.log(data.time); //  2pm
  }, "json");

Also, from the way your formulated your question it looks that you don't have a lot experience with ajax. I suggest you look up some documentation online or find a nice book (search SO, there's a bunch of topics about this)

Answer 2

When the position of an element changes, you will want to post the pixel values to a PHP script using AJAX. Here is a brief example using jQuery...

function storeElementPosition(elem) {
  var off = $(elem).offset();
  $.post("storeElementPosition.php",
    { elem : $(elem).attr("id"), left : off.left, top : off.top },
    function(resp) {
      alert(resp);
    }
  );
}

Answer 3

Use jQuery, it'll make life a whole lot easier. ..

HTML:

<a href="javascript:void(0)" id="savelayout">Save</a>

JavaScript:

$('#savelayout').click(function(){
    var postData = {};
    $('.xy').each(function(){
     var id = $(this).attr('id');
     var pos = $(this).position();
     if (id && id.length){
      postData[$(this).attr('id')] = pos.left.toString() + ',' + pos.top.toString(); 
     }
    });
    $.post('savelayout.php', postData, function(data, textStatus){
     if(textStatus == 'success'){
      alert('Positions saved successfully.');
     }
    });
});

Replace .xy in $('.xy') with the CSS selector that will target all the elements you want saved. Once you do that, if you have two savable elements with with "divid1" and "divid2" id's, the data posted to PHP ($_POST) will look like this:

array(
    'divid1' => '123,351',
    'divid2' => '512,136'
);

You can then explode each string by the comma and grab each int as the x and y coordinate.