Déplacer divtag et position de magasin dans mysql?

Question

Je souhaite que les utilisateurs de mon site Web puissent "déplacer" les balises div une fois qu'ils sont "déverrouillés", puis qu'un script php stocke les positions dans la base de données mysql. Ainsi, une fois que l'utilisateur se reconnecte, les balises div sont positionnées au bon endroit.

Je sais comment placer des balises div dans css, et j'utilise des variables php dans css pour extraire les données de la base de données. Je ne sais pas comment obtenir la position de l'étiquette div afin de le stocker? Peut-être en utilisant ajax ou quelque chose?

des idées bienvenue, merci.

Answer 1

Qu'entendez-vous par position? Est-ce "gauche, droite, centre ..." ou la position en pixels?

S'il s'agit de pixels, utilisez simplement les propriétés css supérieure et inférieure. S'il s'agit d'une position personnalisée, effectuez simplement un rappel lorsque vous modifiez la position.

Vous pouvez facilement obtenir la position en utilisant javascript et une fois que vous l'avez vous voulez enregistrer de manière asynchrone, alors oui ajax est sympa. Recherchez jquery pour que celui-ci: http://docs.jquery.com/Ajax/jQuery.post

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

En outre, de la façon dont votre formulé votre question, il semble que vous n'avez pas beaucoup d'expérience avec ajax. Je vous suggère de rechercher de la documentation en ligne ou de trouver un bon livre (recherche SO, il y a beaucoup de sujets à ce sujet)

Answer 2

Lorsque la position d'un élément change, vous voulez afficher les valeurs de pixels dans un script PHP en utilisant AJAX. Voici un bref exemple en utilisant 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

Utilisez jQuery, ça va rendre la vie beaucoup plus facile. ..

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.'); 
     } 
    }); 
}); 

Remplacer .xy dans $('.xy') avec le sélecteur CSS qui ciblera tous les éléments que vous voulez enregistrés. Une fois que vous faites cela, si vous avez deux éléments savable avec avec « divid1 » et id « divid2 » de, les données affichées à PHP ($_POST) ressemblera à ceci:

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

Vous pouvez ensuite explode chaque chaîne par la virgule et saisir chaque int comme coordonnées x et y.