Jump to content
Sign in to follow this  
captain_torche

Liste 'drag-and-droppable'

Rate this topic

Recommended Posts

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 ?

Share this post


Link to post
Share on other sites

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.

Edited by captain_torche

Share this post


Link to post
Share on other sites

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.

Edited by captain_torche

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Ben, en fait c'est pas très compliqué à mettre en oeuvre.

Je finis la sérialisation au changement d'ordre, et je te fais un petit tuto.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Edited by TheRec

Share this post


Link to post
Share on other sites

Ben, ca serait pas du PHP, à la base.

Juste du javascript qui génèrerai un array, que je transmettrai à une page de traitement PHP.

Share this post


Link to post
Share on other sites

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

Edited by captain_torche

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 !

Edited by captain_torche

Share this post


Link to post
Share on other sites

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:

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...