Aller au contenu

Liste 'drag-and-droppable'

captain_torche

Par captain_torche
dans Scripts et utilitaires

 Partager

Sujets conseillés

captain_torche

captain_torche

Posté
Posté

Salut à tous !

Je cherche à faire un petit truc, pas si simple qu'il n'y parait, en JavaScript :

Actuellement, je récupère chaque élément d'un menu, dans une liste, ce qui me donne quelque chose du genre :

<ol>
<li>element1</li>
<li>element2</li>
<li>...</li>
</ol>

Ce que j'aimerais pouvoir faire, ça serait que chaque élément de cette liste, puisse être saisi à la souris, glissé et déposé à une nouvelle place (d'où le drag-and-drop).

Je récupérerai ensuite le nouvel ordre dans un objet de type array(ça existe en JS ?), que je transmettrai à un script PHP.

Je pars dans un truc trop compliqué ? Ou c'est pas si dur que ça en a l'air ?

captain_torche

captain_torche

Posté
  • Auteur
Posté (modifié)

C'est exactement ça (c'est fou !), mais je m'en sors pas avec l'ASP ... :wacko:

[EDIT] : c'est bon, j'ai réussi à m'en sortir. Je regarderai pendant le week-end, comment récupérer le nouvel ordre.

Modifié par captain_torche
captain_torche

captain_torche

Posté
  • Auteur
Posté (modifié)

C'est juste le côté fonctionnel que je recherche (c'est pour une interface d'admin) :)

Donc, je bidouille un peu pour m'affranchir des effets visuels superflus.

Modifié par captain_torche
NerOcrO

NerOcrO

Posté
Posté

uiop,

Si quelqu'un a traduit ce source ASP en PHP, je serais très interressé ou s'il trouve très proche direct en php.

Merci.

Jok

Jok

Posté
Posté

Il me semble en avoir trouver en php mais impossible de remettre la main desssus..

En tout cas, si captain_torche nous le traduit, c'est bien chouette :)

TheRec

TheRec

Posté
Posté (modifié)

Bonjour,

ça ne vaut pas la peine de tous les citer... ils se trouvent dans ce billet et vu la longeur il y a de quoi faire ;)

La plus utilisée actuellement est à mon avis Prototype de script.aculo.us , c'est celle qui est inclu entre autres avec le framework RoR (Ruby on Rails).

Modifié par TheRec
captain_torche

captain_torche

Posté
  • Auteur
Posté (modifié)

Bon, j'ai réussi à m'en sortir :

Donc, après avoir copié les fichiers disponibles sur le site de script.aculo.us, et les avoir appelés dans ma page :

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>

J'ai créé ma liste, de façon très simple :

<ul class="dragdrop" id="dragdrop">
	<li id="menu_1">Element 1</li>
	<li id="menu_2">Element 2</li>
	<li id="menu_3">Element 3</li>
	<li id="menu_4">Element 4</li>
	<li id="menu_5">Element 5</li>
</ul>

Petites explications, à ce stade :

L'id de la liste, servira à l'identifier pour l'initialisation du comportement.

Les id des éléments de liste sont indispensables, et doivent être de la forme toto_x, où toto est le texte qu'on veut, et x est incrémenté à chaque élément.

Ensuite, il suffit d'initialiser le comportement sur la liste :

<script type="text/javascript" language="javascript">
  Sortable.create('dragdrop');
</script>

A ce stade, on a déjà une liste fonctionnelle (libre à vous de la styler), avec le comportement de base.

Ensuite, on crée le bouton/lien, qui permettra de récupérer le nouvel ordre de la liste :

<a href="#" onClick="go(Sortable.serialize('dragdrop'))">Valider</a>

On obtiendra, dans la fonction go (que je décris juste en-dessous), quelque chose du genre :

dragdrop[]=1&dragdrop[]=2&dragdrop[]=3&dragdrop[]=4&dragdrop[]=5

Avec l'ordre défini selon votre manipulation de la liste.

Il faut donc, dans la fonction go, supprimer ce qui nous est inutile (je pars dans l'optique que je veux récupérer quelque chose de ressemblant à '1,2,3,4,5')

J'ajoute donc dans le head de ma page, la fonction JavaScript suivante :

<script type="text/javascript">
		function go(expr) {
			var reg = new RegExp("(&)", "g");
			var reg2 = new RegExp("[^0-9,]", "g");
			var liste1 = expr.replace(reg, ",");
			var liste = liste1.replace(reg2, "");
			document.location = ('index.php?new_order='+liste);
		}
</script>

La première variable (reg), est une expression régulière qui recherche tous les caractères amperstand (&).

La seconde (reg2), est également une expression régulière qui recherchera toutes les chaînes de caractères n'étant pas des chiffres, ou une virgule.

On remplace ensuite tous les amperstand par des virgules.

On remplace ensuite tous les caractères non-décimaux ni virgules, par une chaîne vide (on les efface).

On obtient donc la valeur recherchée (soit 1,2,3,4,5), qu'on passe en argument GET en appelant la page de traitement.

Ensuite, on pourra traiter la variable avec le langage désiré (PHP, par exemple).

Modifié par captain_torche
Jok

Jok

Posté
Posté

Parfait !!

Tout fonctionne à merveille. Juste une toute petit chose, l'initialisation du comportement de la liste, placée la bien après la liste, sinon ça ne fonctionnera pas.

Merci beaucoup captain_torche ;)

captain_torche

captain_torche

Posté
  • Auteur
Posté (modifié)

Bon, pour ceux que ça intéresse, je poste l'intégralité de mon petit code, qui gère l'ajout de rubrique, la modification, la suppression et bien sûr, la réorganisation de l'ordre des rubriques.

Prérequis :

Avoir installé les fichiers js disponibles sur le site de script.aculo.us, dans le même répertoire que la page (index.php).

Avoir créé dans sa base de données, une table 'rubriques', contenant les champs 'id', 'numero', et 'nom'.

CREATE TABLE `rubriques` (
  `id` tinyint(4) NOT NULL auto_increment,
  `numero` tinyint(4) NOT NULL default '0',
  `nom` varchar(30) character set latin1 collate latin1_bin NOT NULL default '',
  PRIMARY KEY  (`id`),
  KEY `numero` (`numero`)
)

La page doit s'appeler 'index.php' (mais comme tout le reste, c'est modifiable).

<?php
// Connexion à la base
$db = mysql_connect('localhost', 'root', '');
mysql_select_db('Tests',$db);

// Ajout d'une rubrique dans la base
if(isset($_POST['ajout']) && !empty($_POST['nom'])) {
	$sql_max_rubrique = "SELECT MAX(numero) FROM rubriques";
	$req_max_rubrique = mysql_query($sql_max_rubrique);
	$max_rubrique = mysql_result($req_max_rubrique, 0);
	$rubrique = $max_rubrique+1;
	foreach($_POST as $cle => $valeur)
		$$cle = mysql_real_escape_string($valeur);
	$sql_rubrique = "INSERT INTO rubriques VALUES ('', '$rubrique', '$nom')";
	mysql_query($sql_rubrique);
	header('location: index.php');
}

// Mise à jour de l'ordre des rubriques
if(isset($_GET['new_order'])) {
	$id = array();
	$sql_ids = "SELECT * FROM rubriques";
	$req_ids = mysql_query($sql_ids) or die(mysql_error());
	while($ids = mysql_fetch_assoc($req_ids))
		$id[$ids['numero']] = $ids['id'];
	$tab = explode(',',$_GET['new_order']);
	$numero = 1;
	foreach($tab as $valeur) {
		$sql_tab = "UPDATE rubriques SET numero = $numero WHERE id = ".$id[$valeur];
		mysql_query($sql_tab) or die(mysql_error());
		$numero++;
	}
	header('location: index.php');
}
// Suppression d'une rubrique, mise à jour des numéros des rubriques supérieures
elseif(isset($_GET['suppr'])) {
	$sql_suppr = "DELETE FROM rubriques WHERE numero = ".$_GET['suppr'];
	mysql_query($sql_suppr);
	$sql_update = "UPDATE rubriques SET numero = numero-1 WHERE numero > ".$_GET['suppr'];
	mysql_query($sql_update);
	header('location: index.php');
}
if(!isset($_GET['modif'])) {
	$nom_modif = '';
	$bouton = array('Ajouter', 'ajout', 'Ajout');
}
// Affichage des infos d'une rubrique pour modification
else {
	$sql_modif = "SELECT * FROM rubriques WHERE numero = ".$_GET['modif'];
	$req_modif = mysql_query($sql_modif);
	$nom_modif = mysql_result($req_modif, 0, 'nom');
	$id_modif = mysql_result($req_modif, 0, 'id');
	$bouton = array('Modifier', 'modif', 'Modification');
}
// modification du nom d'une rubrique
if(isset($_POST['modif']) && !empty($_POST['nom'])) {
	foreach($_POST as $cle => $valeur)
		$$cle = mysql_real_escape_string($valeur);
	$sql_modif = "UPDATE rubriques SET nom = '$nom' WHERE id = $id";
	mysql_query($sql_modif);
	header('location: index.php');
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<title>Test scriptaculous</title>
	<script type="text/javascript" src="prototype.js"></script>
	<script type="text/javascript" src="scriptaculous.js"></script>
	<script type="text/javascript">
		function go(expr) {
			var reg = new RegExp("(&)", "g");
			var reg2 = new RegExp("[^0-9,]", "g");
			var liste1 = expr.replace(reg, ",");
			var liste = liste1.replace(reg2, "");
			document.location = ('index.php?new_order='+liste);
		}
	</script>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body {
			font-family: Tahoma;
		}
		body > a {
			display: block;
			text-align: center;
			width: 150px;
			margin-left: 50px;
			padding: 5px;
			border: 1px solid #DDD;
			text-decoration: none;
			color: #7A0C00;
			font-weight: bold;
			background-color: #EFEFEF;
			font-size: 11px;
		}
		form {
			margin: 20px;
		}
		.dragdrop {
			width: 150px;
			list-style-type: none;
			margin: 20px 50px;
		}
		.dragdrop li {
			border: 1px solid #DDD;
			color: #AAA;
			background-color: #EFEFEF;
			margin: 2px;
			padding: 2px;
			padding-left: 10px;
			font-weight: bold;
			cursor: move;
			clear: both;
			font-size: 11px;
		}
		.dragdrop li .liens {
			display: block;
			position: absolute;
			top: 0px;
			right: 0px;
		}
		.dragdrop li .liens a {
			text-decoration: none;
			color: #7A0C00;
			font-size: xx-small;
			padding-left: 2px;
		}
		fieldset {
			width: 250px;
			border: 1px solid #AAA;
			background-color: #EFEFEF;
			padding: 10px;
		}
		legend {
			color: #7A0C00;
			font-size: 11px;
			font-weight: bold;
			padding: 2px 10px;
			border: 1px solid #AAA;
			background-color: #EFEFEF;
		}
		input {
			border: 1px solid #7A0C00;
			color: #7A0C00;
		}
	</style>
</head>
<body>
<ul class="dragdrop" id="dragdrop">
	<?php
		$sql_liste = "SELECT * FROM rubriques ORDER BY numero ASC";
		$req_liste = mysql_query($sql_liste);
		while($liste = mysql_fetch_assoc($req_liste)) {
	?>
		<li id="menu_<?=$liste['numero']?>">
			<?=$liste['nom']?>
			<span class="liens">
				<a href="index.php?modif=<?=$liste['numero']?>" title="Modifier">
					[M]
				</a>
				<a href="#" title="Supprimer" onclick="if(confirm('Êtes-vous sûr de vouloir supprimer <?=$liste['nom']?> ?')) { window.location = 'index.php?suppr=<?=$liste['numero']?>'; }">
					[X]
				</a>
			</span>
		</li>
	<?php
		}
	?>
</ul>
<a href="#" onClick="go(Sortable.serialize('dragdrop'))">Valider le nouvel ordre</a>
<script type="text/javascript" language="javascript">
  Sortable.create('dragdrop');
</script>
<form name="test_insert" action="index.php" method="post">
	<fieldset>
		<legend><?=$bouton[2]?> d'une rubrique</legend>
		<input type="text" name="nom" value="<?=$nom_modif?>" />
		<?php
			if(isset($_GET['modif']))
				echo '<input type="hidden" name="id" value="'.$id_modif.'" />';
		?>
		<input type="submit" name="<?=$bouton[1]?>" value="<?=$bouton[0]?>" />
	</fieldset>
</form>
</body>
</html>

Amusez-vous bien !

Modifié par captain_torche
  • 1 year later...
ALeX!S

ALeX!S

Posté
Posté

Juste parce que je suis en plein dedans pour le moment...

J'ajouterais juste que la fonction JS go(expr) ne sert à rien, ou presque, il existe déjà de quoi obtenir ce résultat ...

Il suffit d'utiliser Sortable.sequence('id_element').join(",") au lieu de Sortable.serialize pour obtenir la liste voulue (ici : 1,2,3,4 , ...) avec ce que l'on veux dans le join bien sur :smartass:

destroyedlolo

destroyedlolo

Posté
Posté

Merci a tous pour cet excellent sujet.

Ca fait un moment que je voulais moderniser une de mes interface, et je trouve ici un bon point de depart :thumbsup:

Une question a propos de

Dans la derniere page, il parle avec raison des probleme de rollback ... comment feriez vous pour remetre la liste dans l'ordre dans laquelle elle se trouvait avant la mise a jour qu'a echoue ?

ALeX!S

ALeX!S

Posté
Posté

Et bien tu effectues la sauvegarde en ajax, si tu as une erreur mysql dans la page de traitement, tu renvoies cette erreur en réponse ajax.

Dans ta fonction ajax tu récupères le retour, soit tu affiches "mise à jour réussie" si c'est ok, si tu as une erreur en retour, tu relances la mise à jour.

destroyedlolo

destroyedlolo

Posté
Posté

Oui, mais si la seconde mise a jour echoue aussi ... comment faire pour remettre la liste a un etat correcte ?

L'idee que j'ai en tete c'est de forcer le rechargement de la page, mais y'a peut etre mieux non ?

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...