Organiser un site à la volée (sortable)

[LeDuc123]

Bonjour,

Cela fait quelques jours que je souhaite approfondir le simple tri d'une liste avec JQuery. J'ai donc travaillé sur plusieurs points :

1. Trier des bloc (div) et non des listes
2. Organiser le tri sur deux colonnes
3. Sauvegarder les positions dans une base de données

J'ai fais beaucoup de recherches sur le sujet et j'ai trouvé beaucoup de réponses, mais je bloque encore sur un point et je n'ai trouvé aucun tutorial ou sujet sur un forum qui correspond à ce que je cherche.

Si j'arrive à enregistrer les positions au sein d'une liste (sur un colonne), je n'arrive pas à le faire sur deux colonnes (ça doit pas être compliqué pourtant).

J'espère qu'avec les bouts de code qui suivent vous allez comprendre ce que je veux dire et surtout pouvoir m'aider.

Voici la table qui permet de trier les DIVs

Code mysql :

1
2
3
4
5
6
7
8
9
10
 
--
-- Contenu de la table `bloc`
--
 
INSERT INTO `bloc` (`id`, `nom`, `afficher`, `ordre`, `colonne`) VALUES
(1, 'Catégories', 1, 1, 2),
(2, 'Liens divers', 1, 2, 1),
(3, 'nouvelle', 1, 3, 1),
(4, 'Produits', 1, 0, 1);

Je ne met pas le code qui permet de générer les DIV mais juste le code html qui en ressort :

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="info">1-</div>
<div id="info2">2-</div>
 
<div class="colonne" id="colonne_g">
  	<div id="bloc_4"></div>
	<div id="bloc_2"></div>
	<div id="bloc_3"></div>
</div>
<div class="colonne" id="colonne_d">
  	<div id="bloc_1"></div>
</div>

Le code javascript en jquery qui permet de trier et qui devrait je pense faire appel à une page en ajax pour l'enregistrement:

Code js :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
$("#colonne_g").sortable({
                        connectWith: '#colonne_d',
                        update : function () {
                                var order = $('#colonne_g').sortable('serialize');
                                $("#info").load("ajax.php?"+order);
                                }
                });
 
$("#colonne_d").sortable({
                        connectWith: '#colonne_g',
                        update : function () {
                                var order = $('#colonne_d').sortable('serialize');
                                $("#info2").load("ajax.php?"+order);
                                }
                });

Voila ce que j'ai trouvé, et ça marche, et j'ai mis ça dans le page ajax.php pour vérifier que ça marche (et ça marche):

Code php :

1
2
 
echo 'ok';

J'ai vraiment cherché, et je n'ai pas trouvé de réponse satisfaisante, je pense que pour quelqu'un qui s'y connait c'est vraiment facile.

Merci beaucoup

[danielhagnoul]

Bonsoir

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("#colonne_g").sortable({
	connectWith: '#colonne_d',
	update : function () {
		$( "#info" ).text( "1 : " + $('#colonne_g').sortable('serialize') );
		$( "#info2" ).text( "2 : " + $('#colonne_d').sortable('serialize') );
	}
});
 
$("#colonne_d").sortable({
	connectWith: '#colonne_g',
	update : function () {
		$( "#info" ).text( "1 : " + $('#colonne_g').sortable('serialize') );
		$( "#info2" ).text( "2 : " + $('#colonne_d').sortable('serialize') );
	}
});