[AJAX] [Scriptaculous] Liste générée dynamiquement avec éléments déplaçables

**shoop** · 02/10/2007, 12h06

Bonjour!

J'utilise php et la librairie Prototype pour développer un petit utilitaire de Newsletter.

Pour mettre à jour ma liste de contacts, un div est mis à jour via un fichier php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function updateContacts(){
        new Ajax.Updater('liste','contacts.php',{
	asynchronus: true
 
	});
}

Cette fonction est appelée dans la balise <body...>

contacts.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
while($groupe = mysql_fetch_array($requete_groupe)){
		$id_groupe = $groupe['id'];
 
		$requete_contact = mysql_query("
			SELECT * FROM [...] WHERE contact.ig_groupe = '$id_groupe';
		");
 
		echo "<p class='groupe' id='groupe'>+ ",$groupe['libelle'],"</p>";
		echo"<ul id='liste'>";
		while($contact = mysql_fetch_array($requete_contact)){
			echo "<li><p id='",$contact['id'],"' class='contact'>",$contact['nom']," ",$contact['prenom']," : <i>",$contact['email'],"</i></p></li>";
			$i++;
		}
		echo"</ul>";
		$j++;
	}

Un contact appartient à un groupe. Illustration :

Jusqu'ici tout fonctionne

On peut voir qu'un groupe = une liste...

Seulement j'aimerais rendre les contacts déplaçables de groupe en groupe,
et c'est là que ça se corse!

Premièrement, ça ne peut pas fonctionner puisque les contacts doivent être déplacés de groupe en groupe, soit de liste en liste...

Deuxièment, je dois générer un id de liste dynamiquement, sinon deux listes portent le même nom, et le style css bug...

Troisièment,

Merci et j'espère qu'il existe une solution autre que d'abandonner l'idée du "drag and drop"!

**shoop** · 03/10/2007, 00h12

Finalement, j'ai fini par trouver dans les exemples fournis avec Scriptaculous. Il y en a un qui m'avait échappé : c'est l'option "tree: true" dans une liste Sortable.

J'ai donc recommencé avec un exemple plus simple, sans php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
 
		<ul id="liste">
			<li>groupe 1</li>
				<ul>
					<li class="contact">contact 1 du groupe 1</li>
					<li class="contact">contact 2 du groupe 1</li>
				</ul>
			<li>groupe 2</li>
				<ul>
					<li class="contact">contact 1 du groupe 2</li>
					<li class="contact">contact 2 du groupe 2</li>
				</ul>
		</ul>
 
		<script language='javascript'>
			Sortable.create('liste', {tree: true, only: 'contact', dropOnEmpty: false});
		</script>

Seulement j'ai un nouveau probleme, lorsque je déplace tous les contacts dans le groupe 1, impossible de remettre des contacts dans le groupe 2...

Aurais-je raté une option?

[AJAX] [Scriptaculous] Liste générée dynamiquement avec éléments déplaçables

JavaScript

Discussions similaires

Partager

Partager