Drag'n'Drop à la volée

Version imprimable

Bonjour à tous, j'ai maintes et maintes fois eu recours à votre aide précieuse via les poste existant (Merci à vous au passage).
Mais je suis aujourd'hui face à problème auquel je n'ai trouvé aucune solution sur ce forum.

Je vous expose la chose, développant depuis peu en ajax via aculous et prototype je cherche aujourd'hui à faire un backoffice en ajax avec un fonction drag'n'drop pour la suppression (oui je sais c'est plus pour faire que genre que réellement utile mais que voulez vous ^^).

Le problème est donc que je dois actualisé assez souvent (1 seconde dans mon exemple) la liste des entrées de ma base.. or il semblerait que la fonction drag et la mise à jour auto ne soit pas très compatible.

premier cas :
je lance ma boucle php directement dans mon fichier de base et le drag marche niquel. (seulement aucune mise à jour automatique des données si je modifie).
Code:

1 2 3 4 5 6 7 8 9 10 11 <?php header('Content-type: text/html; charset=utf-8'); include('asset/config.inc.php'); mysql_query("SET NAMES 'utf8'"); $req=mysql_query("select * from video"); while($data=mysql_fetch_object($req)){ echo '<div id="'.$data->id.'">'.$data->produit.' '.$data->probleme.'</div>'; echo '<script type="text/javascript">new Draggable("'.$data->id.'",{revert:true});</script>'; } ?>
deuxième cas :

ma fonction de rafraichissement auto :
Code:

1 2 3 4 5 6 <script type="text/javascript" language="javascript" charset="utf-8"> function auto_update(){ new Ajax.PeriodicalUpdater('liste', 'auto_update.php', {frequency: 1}); } </script>
et je place donc le petit script php du dessus dans un fichier externe appelé auto_update.php
La mise à jour se fait bien toutes les secondes, en revanche.. mon drag ne marche plus..

Si une ame charitable voulait bien m'aider ou m'indiquer une autre solution (en aculous/prototype de préférence) je lui serait reconnaissante.

Cordialement,
Sweet

Il faut que tu redéfinisses les enfants de ton élément d'id liste comme draggable après la requete AJAX :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript" language="javascript" charset="utf-8"> 
 
function auto_update(){
	 new Ajax.PeriodicalUpdater('liste', 'auto_update.php', {frequency: 1, onComplete:function(){
$("liste").select("...").each(function(item) {
  new Draggable(item);
});
}});
}
</script>

Bonjour,

Merci de ta réponse.. bien qu'elle ne soit au final révélée inutile pour mon cas ^^' désolé du temps perdu.

En fait le drag'n'drop et la fonction Ajax.PeriodicalUpdater sont en effet un poil incompatible (oui le rechargement automatique toutes les secondes remet l'élément 'dragé' à sa position initial, il faut donc être très vif (l'allongement de temps de recharge aurait pu le faire, mais on perd le côté instantané de la mise à jour))

Je me permet de poster ma solution au cas ou elle intéresserait du monde:
je met donc à jour uniquement quand une modification est apporté, en revanche le problème de chargement des données en php via un Ajax.Updater et le drag ne fonctionnaient toujours pas ensemble j'ai donc dans modifié ma boucle php comme ceci
Code:

1 2 3 4 5 6 7 8 9 10 <?php header('Content-type: text/html; charset=utf-8'); include('asset/config.inc.php'); mysql_query("SET NAMES 'utf8'"); $req=mysql_query("select * from video"); while($data=mysql_fetch_object($req)) { echo '<div id="'.$data->id.'" onmouseover="drag(\''.$data->id.'\')">'.$data->produit.' '.$data->probleme.'</div>'; } ?>
et ajouter la fonction javascript suivante :
Code:

1 2 3 4 function drag(item){ new Draggable(item,{revert:true}); }
ça sonne un peu bidouille et les puriste vont surement me jeter des pierres mais bon, ça marche ^^, ça reste l'essentiel.

Cordialement,
Sweet