Enregistrer positions images après drag&drop

Fermé
Rente Messages postés 129 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 6 juin 2011 - 26 mai 2011 à 17:10
Bonjour tout le monde!
Niveau : J'ai commencé le javascript pour l'occasion : donc faible.
Mon but : Je veux aller chercher dans une bdd des images, les afficher. Ensuite l'user réorganise tout ca par un drag and drop. En cliquant sur "enregistrer", un script vient récupérer les positions de chaque images et informe une page php que la position de l'image (un id, coord en x et y).

Pour le moment, j'ai l'affichage des images comme suit :
$query=$db->query('SELECT * FROM draganddrop'); 
while($data = $query->fetch()) 
{
?>
<div class="draggableBox" style="left:<?php echo $data['x_init']?>px; top:<?php echo $data['y_init']?>px">
<img id="myPicture" src="<?php echo $data['url']?>"/>
</div>
<?php
}



Le Drag&Drop est géré par ce script :

var storage = []; // Contient l'objet de la div en cours de déplacement


function addEvent(el, event, func) { // Une fonction pour gérer les événements sous tous les navigateurs
  if(el.attachEvent) {
    el.attachEvent('on'+event, func);
  } else {
    el.addEventListener(event, func, true);
  }
}


function init() { // La fonction d'initialisation----------------------------------------
  var els = document.getElementsByTagName('div'),
      elsLength = els.length, 
      target;
  
  for(var i = 0 ; i < elsLength ; i++) {
    if(els[i].className == 'draggableBox') {
      
      addEvent(els[i], 'mousedown', function(e) { // Initialise le drag & drop-----------
        var s = storage;		
        s['target'] = e.target || event.srcElement;
        s['offsetX'] = e.clientX - s['target'].offsetLeft;
        s['offsetY'] = e.clientY - s['target'].offsetTop;
      });
      
      addEvent(els[i], 'mouseup', function() { // Termine le drag & drop----------------
	  var s = storage;
	  //alert('coord : ' + s['target'].offsetLeft + ' en x et ' + s['target'].offsetTop + 'en y'); 
		storage = [];
      });
    }
  }

  addEvent(document, 'mousemove', function(e) { // Permet le suivi du drag & drop--------
    var target = storage['target'];
    
    if(target) { // Si target n'existe pas alors la condition va renvoyer "undefined", ce qui n'exécutera pas les deux lignes suivantes
      target.style.top = e.clientY - storage['offsetY'] + 'px';
      target.style.left = e.clientX - storage['offsetX'] + 'px';
    }
  });
}

  
init();




Et je souhaiterai cliquer "enregistrer" et associer des positions à chaque image et envoyer ca dans une page php pour tout stocker dans un bdd.
Mais je rame pas mal, je ne sais pas trop comment m'y prendre...

Si quelqu'un peut m'aider, ca serait super cool.

Merci d'avance :D

A voir également: