 | Tri Drag and Drop dans une liste dynamique
| |
Plateforme : PHP / Ajax / JVS / MySQL
Détails : Permet le tri d'une liste dynamique par Drag and Drop sans rechargement |
Pré requis ?
Il existe plusieurs script sur le web qui
propose du drag and drop, j'ai fait le tour de tout ces scripts, et il
y en a un qui sort du lot qui est très puissant, et en plus de cela
très simple à utiliser.
Pour réaliser ce script vous aurez besoin de Jquery, c'est un framework Javascript qui permet de simplifier l'utilisation de javascript. Pour le télécharger rendez vous sur : http://www.jquery.com/
On utilisera aussi un plugin Jquery nommé interface que vous trouverez ici : http://interface.eyecon.ro/download
Comment utiliser JQuery et Interface pour une liste ?
Après avoir téléchargé les 2 fichiers JS, vous devez les intégrer dans votre projet.
Pour cela rien de plus simple, dans votre header de votre page tapez ceci :
<head>
<!-- Importation JQuery et Interface.js -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<!-- Styles de votre liste -->
<style type="text/css" media="all">
.sortable_item {
cursor : move;
width : 100%;
list-style : none;
}
.ul_style {
list-style-type : none;
margin : 0;
padding : 0;
}
</style>
</head>
|
Comment utiliser le drag & drop pour trier une liste ?
Après avoir importé Jquery et Interface dans votre entête HTML vous pouvez commencer à créer votre liste de tri.
Voici comment procéder :
<body>
<!-- ici ce trouve votre liste -->
<ul id="sortlist" class="ul_style">
<li id="votre_id_1" class="sortable_item">item 1</li>
<li id="votre_id_2" class="sortable_item">item 2</li>
<li id="votre_id_3" class="sortable_item">item 3</li>
<li id="votre_id_4" class="sortable_item">item 4</li>
</ul>
<!-- ce script java est à intégrer juste avant votre balise </body> -->
<script type="text/javascript">
$(document).ready (
function() {
$( "#sortlist" ).Sortable( {
accept : 'sortable_item',
axis : 'vertically',
opacity : 0.6,
onchange : function ( sorted ) {
serial = $.SortSerialize( 'sortlist' );
}
});
});
</script>
</body>
|
Remarque :
Ici les listes ne contiennent que du texte.
On peut bien sur intégrer des images et autres comme élément de liste.
Voici ci dessous le résultat obtenu :
Quel sont les options disponibles pour ma liste ?
Voici quelques options permettant de personnaliser le drag & drop,
Vous trouverez la liste de ces paramètres et méthodes sur : http://interface.eyecon.ro/docs/sort
axis : Bloque le drag & drop sur un axe (vertically ou horizontally)
opacity : Permet de régler l'opacité (de 0 à 1)
fx : Durée de l'effet d'apparition lors du drop (nombre en ms)
ghosting : crée un copie de l'élément déplacé
|
Comment sauvegarder la position de la liste avec PHP et MySql ?
Pour allez encore plus loin on peut utiliser les méthodes Jquery pour envoyer une requête Ajax.
Avec Ajax vous pouvez appeler une page PHP qui vous permettra de sauvegarder les positions
des éléments et cela sans recharger la page.
<script type="text/javascript">
$(document).ready (
function () {
$( "#sortlist" ).Sortable ( {
accept : 'sortable_item',
axis : 'vertically',
opacity : 0.6,
onchange : function ( sorted ) {
serial = $.SortSerialize ( 'sortlist' );
// requète Ajax pour l'enregistrement des positions
$.ajax ( {
url : "set_position.php",
type : "post",
data : serial.hash,
// Si vous avez besoin d'un feedback de la requête vous
// pouvez utiliser ces fonctions ci dessous.
//complete: function(data){alert(data);},
//success: function(feedback){ $('#data').html(feedback); }
//error: function(){alert('Erreur lors du déplacement ');}
});
}
});
});
</script>
|
Remarque :
Attention les id des éléments de la liste ( balise <li id='votre id'> )
doit être cohérent avec les id contenu dans la base MySql.
Voici maintenant le script php "set_position.php" :
<?
/*
Mettez ici votre script de connexion à votre base de données
*/
// Récupération des valeurs post envoyé par la requête Ajax
$sortlist = $_POST [ 'sortlist' ];
// On update la table avec les nouvelles positions
for ($i = 0 ; $i < count ( $sortlist ) ; $i++) {
// SQL Query :
$query = ( "update matable set position='".($i + 1)."' where id = $sortlist [ $i ] " );
$ajout = mysql_query ($query) or die ( mysql_error() );
}
?>
|
JQuery et les plugins ?
Voici les différents plugin JQuery si vous voulez approfondir l'utilisation de ce framework javascript :
http://docs.jquery.com/Plugins
|
 Commenter ce wiki sur le forum
Fichiers joints :
| Fichier | Description | Taille de fichier |
|---|
 sortlist.zip | Fichiers exemples avec JQuery et Interface inclus | 40 Kb |
|
Wiki - JavaScript / VBScript - Tri Drag and Drop dans une liste dynamique
la structure est très simple :
id : uint (clé primaire auto-incrément)
nom : text (ou tout autre champs utiles)
...
position : uint
Le drag and drop fonctionne très bien mais je n'arrive pas à enregistrer la position dans la table, serait-il possible d'avoir un exemple de structure de la table devant recevoir l'info, pour l'instant j'ai une table "position_list" possédant 2 champs "id" et "position"
Ainsi qu'un exemple du fichier "set_position.php" configuré avec cette structure de table...
Merci encore pour ce script
Mais tu as raison, il est préférable d'écrire :
$query = ( "update matable set position='".($i + 1)."' where id = ".$sortlist [ $i ]);
Sous IE 7 et 8, impossible de dragué 2 fois le meme objet...
where id =". $sortlist [ $i ] );
au lieu de
where id = $sortlist [ $i ] " );
Depent du type de donnee du champ 'id'
merci pour ce script
petite question.
je souhaite obtenir serial.hash sous la form (item1,item2,item3...) plutot que sous la forme (sortlist[]=item1&sortlist[]=item2...)
comment puis-je proceder?
merci pour vos reponses
je regarderai si je vois pas une erreur qui traine.
Firefox est moins sensible au erreur de balise par exemple alors que IE pour la moindre petite erreur cela peut avoir des conséquences sur le fonctionnement global.
Merci pour votre réponse rapide !
Quel version de IE utilisez vous ?
Et une autre question, est ce que mon exemple de déplacement dans mon wiki (sur cette page) fonctionne correctement avec votre version d'IE ?
sous IE, une fois qu'un élément a été déplacé, je n'arrive pas à le déplacer une deuxième fois. Cela se produit avec ou sans l'appel Ajax et pas sur FireFox. Une idée du soucis ? (je suis partie de vos fichiers de départ)
Merci par avance
Alors là aucune idée dsl... je n'ai jamais eu d'erreur firebug.
Votre script étant tellement intéressant, je me permet de vous recontacter avec mes scripts.
0){
echo '';
echo ' ';
foreach($listePagesFromSrubrique as $page){
echo '('.$page[page_id].') '.$page[page_titre].'';
}
echo '';
echo '';
}
?>
ensuite votre script javascript avec :
...
url: "set_position.php",
type: "post",
data: serial.hash,
...
alert(serial.hash) affiche bien le tableau :
sortlist[]=5&sortlist[]=15&sortlist[]=2&sortlist[]=3
mais dans firebug j'ai ce message :
Firebug needs to POST to the server to get this information for url: http://localhost/__backoffice_v4/maj/rang_pages.php
et la mise à jour ne se fait pas.
voici le script :
merci de votre aide et je vais essayer tout cela en get
J'ai déjà réalisé ce script avec des paramètres en GET,
cela ne pose normalement aucun problème.
Je pense que cela vient directement du code de la page index.php
Désolé si je ne vous aide pas plus car il est très difficile de débugger un code que je n'ai pas sous les yeux, cela peut venir de tout et n'importe quoi, un point virgule par exemple ;)
Bon courage, il s'agit la plupart du temps d'une petite erreur.
le déplacement fonctionne bien mais pas le script ajax :
url: "index.php?m=1&a=set_position"
En fait la page qui modifie les rangs est appelé par une page index via la valeur "a" dans l'url
merci de votre aide.
Ne te casse pas la tête pour le dérangement, j'aime bien résoudre les problème ;)
uncaught exception: Access to restricted URI denied (NS_ERROR_DOM_BAD_URI)
a noter que je suis chez free
sortlist[]=2&sortlist[]=1&sortlist[]=3&sortlist[]=4&sortlist[]=5&sortlist[]=6&sortlist[]=7&sortlist[]=8&sortlist[]=9&sortlist[]=10&sortlist[]=11&sortlist[]=12&sortlist[]=13&sortlist[]=14&sortlist[]=15&sortlist[]=16&sortlist[]=17&sortlist[]=18&sortlist[]=19&sortlist[]=20&sortlist[]=22&sortlist[]=23&sortlist[]=24&sortlist[]=21&sortlist[]=25
mais cela ne résoud pas mon soucis qu'il enregistre rien
Attention le serial = $.SortSerialize ( 'sortlist' ); ainsi que le serial.hash est très important.
Essai de mettre une alert (serial.hash);
Normalement la requête Ajax envoi à un tableau au fichier php.
Tu peut aussi utiliser la ligne complete: function(data){alert(data);} pour vérifier les données que tu as transmis.
j'ai appliqué votre script à la lettre et il ne fonctionne pas le drag n drop fonctionne mais pas l'enregistrement j'ai mis un alert (serial); et il m'affiche object[object] je ne comprends pas le probléme pourtant il appel bien les 2 scripts et tout est bien placé
A noter j'ai mis un tableau dans mes c'est juste un détails de présentation
Essayez d'isoler le problème en désactivant les autres scripts que vous utilisez sur votre page, Sinon une petite remarque : vérifier que vous n'utilisé bien qu'un seul framework js. car l'utilisation de Jquery et Scriptaculous (par exemple) est incompatible.
Merci de votre rapidité de réaction.
La version de JQuery est celle que j'ai téléchargé depuis le fichier zip que vous proposé sur cette page
Merci
J'ai essayé d'utiliser votre script
mais lorsque je déplace un li ca marche, j'ai bien le tableau avec les bonnes positions des li, mais j'ai cette erreur dans FireBug :
this.options.curAnim is undefined
c'est vraiment un outils indispensable.
Content que tu ai trouvé ton erreur.
La plupart du temps c'est ce genre de chose, erreur de frappe etc...
en faite j'avais ecris ceci :
data : "serial="serial.hash etc...
als qu'il faut écrire data : serial.hash
du coup j'ai bien tout les éléments de ma liste alors qu'avant le 1er n'y était pas. Ca parait quand meme bizard :/
Sinon j'utilise Firebud si tu connais, c'est un plugin pour mozilla. Il permet entre autre de vérifié les variables envoyés en post et leurs contenus. Et j'ai bien ma liste renvoyé en post, seulement toujours pas le 1er élément compris à l'intérieur :/
Dans ta fontion "onchange" essaie de mettre un alert
pour vérifier si tu as bien toutes tes données qui sont transmis.
onchange : function ( sorted ) {
serial = $.SortSerialize('sortlist');
alert (serial);
... etc
Ensuite dans ta page PHP vérifie que tu commence bien à l'élément 0 du tableau et pas 1 ;-) ... on sait jamais.
Sinon je ne vois pas d'où cela pourrai venir,
car je n'ai jamais rencontré ce genre de problème.
En tout cas j'espère que tu trouvera la solution.
Tu ne doit pas être très loin je pense ...
J'ai un soucis avec le sortSerialize. En effet, en post je récupère bien un tableau contenant l'id de tous les li, sauf le 1er li. Et j'aimerais vraiment pouvoir tous les récupérés.
D'où viendrais ce problème ?
Merci
Cordialement, Nimo
Je pense que ton problème vient directement du code javascript.
La requête Ajax permet d'envoyer des données qui te permettera d'enregistrer par exemple la position des éléments.
Essai dans un premier temps d'optenir le drag and drop sans la requête Ajax.
Comme noté plus haut dans le tutorial :
$(document).ready (
function() {
$( "#sortlist" ).Sortable( {
accept : 'sortable_item',
axis : 'vertically',
opacity : 0.6,
onchange : function ( sorted ) {
serial = $.SortSerialize( 'sortlist' );
}
});
});
Pense bien à intégrer le frameworks JQuery et le plugin interface dans ton header.
Puis il faut que tu regarde si tu as des erreurs javascript via firebug (plugin firefox). Cela peut te donner des messages d'erreur qui vont te permettre de débugger ton code facilement.
Tu peut aussi télécharger les fichiers exemples, il devrait être fontionnels.
Voilà, j'espère t'avoir aidé et que tu trouvera la solution facilement.
il a l'air super ton code , mais chez moi ca na marche pas.
Si je met que la requette :
$.ajax ( {
url : "set_position.php",
type : "post",
data : serial.hash,
le drag ne marche pas.
Y a t il une soluce
Merci