Description

Voici quelques choses de très intéressant. Cela va vous permettre via un interface très ludique et très puissante d’organiser des éléments, d’un menu par exemple, via un drag & drop. On prends un élément on le fait glisser à l’endroit où l’on veut qu’il aille, puis on enregistre les positions.

Code

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

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

On cré une liste toute simple

html4strict
<ul class="dragdrop" id="dragdrop">
	<li class="sortcat" id="menu_1">Element 1</li>
	<li class="sortcat" id="menu_2">Element 2</li>
	<li class="sortcat" id="menu_3">Element 3</li>
	<li class="sortcat" id="menu_4">Element 4</li>
	<li class="sortcat" 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 :

html4strict
<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

html4strict
<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

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

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).

Un chouille de CSS dans tout ça

css
.sortcat
{
	cursor : move;
	background : #FFCC55;
	border : 1px solid #ccc;
	padding : 0.3em;
	margin : 5px 0 0 0;
	height: 25px;
	-moz-border-radius: 5px;
	list-style-type: none;
	width: 300px;
}

Repris et amélioré du Hub.

j0k3r_n0ir 06/03/2006 11:06