UI Sortable et Tabs. Listes connectées et triables. Gestion des événements.

**t_ferreira** · 15/12/2010, 16h03

Bonjour à tous!

J'essaie d'utiliser depuis peu un des éléments de l'interface jQuery UI, le sortable "Connect lists through tabs", dont la démo ainsi que le code source sont trouvables à cette adresse :
http://jqueryui.com/demos/sortable/#...s-through-tabs

J'utilise la version 1.4.4 de jQuery, ainsi que la version 1.8.7 de jQueryUI (version custom contenant tous les éléments possible).

J'ai donc intégré cette interface sur mon appli web, et l'affichage fonctionne parfaitement. Le seul soucis est que j'aimerais effectuer une fonction JavaScript lors de deux évènements :

Lors de la sortie d'une des lignes d'un onglet (expéditeur)
Lors de l'entrée de la ligne sur l'onglet destinataire

Ces deux évènements sont présents dans la documentation, "Remove" et "Receive", mais cela fait un sacré bout de temps que j'essaie de les faire se déclencher, rien à faire.

Voici le javascript initial de la démo, comme indiqué sur le site :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<script>
	$(function() {
		$( "#sortable1, #sortable2" ).sortable().disableSelection();
 
		var $tabs = $( "#tabs" ).tabs();
 
		var $tab_items = $( "ul:first li", $tabs ).droppable({
			accept: ".connectedSortable li",
			hoverClass: "ui-state-hover",
			drop: function( event, ui ) {
				var $item = $( this );
				var $list = $( $item.find( "a" ).attr( "href" ) )
					.find( ".connectedSortable" );
 
				ui.draggable.hide( "slow", function() {
					$tabs.tabs( "select", $tab_items.index( $item ) );
					$( this ).appendTo( $list ).show( "slow" );
				});
			}
		});
	});
	</script>

Voici le script une fois ma gestion de l'évènement "Receive" (par exemple) ajoutée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script>
	$(function() {
		$( "#sortable1, #sortable2" ).sortable({

                        receive: function(event,ui) { alert("test"); }

                 }).disableSelection();

		var $tabs = $( "#tabs" ).tabs();

		var $tab_items = $( "ul:first li", $tabs ).droppable({
			accept: ".connectedSortable li",
			hoverClass: "ui-state-hover",
			drop: function( event, ui ) {
				var $item = $( this );
				var $list = $( $item.find( "a" ).attr( "href" ) )
					.find( ".connectedSortable" );

				ui.draggable.hide( "slow", function() {
					$tabs.tabs( "select", $tab_items.index( $item ) );
					$( this ).appendTo( $list ).show( "slow" );
				});
			}
		});
	});
	</script>

Mais lorsque je déplace une des lignes sur un onglet, aucune réaction...
Je précise que lors de l'utilisation de l'évènement "UPDATE" par exemple (propre aux objets "sortable", et qui se déclenche lorsque l'on change l'ordre des lignes), cela se déclenche bien.

Si vous avez des idées je vous remercie d'avance !

**danielhagnoul** · 16/12/2010, 23h07

Bonsoir

On doit agir dans l'événement drop du widget droppable :

Le li manipulé : ui.draggable
La liste sortable d'origine : ui.draggable.parent()
Le tab d'origine : ui.draggable.parents("div[id^='tab']")
Lors de l'entrée de la ligne sur l'onglet destinataire : on y est !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$tab_items = $("ul:first li", $tabs).droppable({
	accept: ".connectedSortable li",
	hoverClass: "ui-state-hover",
	drop: function(event, ui) {
		console.log("le li", ui.draggable);
		console.log("la liste", ui.draggable.parent());
		console.log("le tab", ui.draggable.parents("div[id^='tab']"));
 
		var $item = $(this),
			$list = $($item.find("a").attr("href")).find(".connectedSortable");
 
		ui.draggable.hide("slow", function(){
			$tabs.tabs("select", $tab_items.index($item));
			$(this).appendTo($list).show("slow");
		});
	}
});

**t_ferreira** · 17/12/2010, 17h12

Bonjour,

Merci beaucoup pour ces éclaircissements, par contre ce que je cherchais à dire lors de l'évènement "lors de l'entrée de la ligne sur l'onglet destinataire", c'est en fait le moment après l'évènement "drop", lorsque la ligne déplacée à rejoint sa nouvelle place.

Ceci de manière à savoir, par exemple, le contenu des onglets après un déplacement.

Mais j'ai contourné le souci en récupérant le "tab" cible, avec la méthode event.target, ça me donne toutes les infos nécessaires sur ce qui a été ajouté à un certain onglet

**zibbu** · 08/02/2011, 13h37

Bonjour,

j'utilise exactement le même code mais ce que je tente de faire depuis 3 jours est de sauvegarder chaque modification des tabs (le nombre dépend de ce que j'affichage de ma BDD).

J'ai réussi un semblant de code pour sauvegarde le contenu avecd l'ordre de la 1ère tab mais impossible de le faire sur les autres tabs.
De même que pour sauvegarder l'etat d'un li qui passe d'une tab à l'autre.

Je suis complêtement perdu, du coup je repars un la source d'origine, si quelqu'un pouvait m'aider ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<style>
	#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
	</style>
	<script>
	$(function() {
		$( "#sortable1, #sortable2" ).sortable().disableSelection();
 
		var $tabs = $( "#tabs" ).tabs();
 
		var $tab_items = $( "ul:first li", $tabs ).droppable({
			accept: ".connectedSortable li",
			hoverClass: "ui-state-hover",
			drop: function( event, ui ) {
				var $item = $( this );
				var $list = $( $item.find( "a" ).attr( "href" ) )
					.find( ".connectedSortable" );
 
				ui.draggable.hide( "slow", function() {
					$tabs.tabs( "select", $tab_items.index( $item ) );
					$( this ).appendTo( $list ).show( "slow" );
				});
			}
		});
	});
	</script>
 
<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
	</ul>
	<div id="tabs-1">
		<ul id="sortable1" class="connectedSortable ui-helper-reset">
			<li class="ui-state-default">Item 1</li>
			<li class="ui-state-default">Item 2</li>
			<li class="ui-state-default">Item 3</li>
			<li class="ui-state-default">Item 4</li>
			<li class="ui-state-default">Item 5</li>
		</ul>
	</div>
	<div id="tabs-2">
		<ul id="sortable2" class="connectedSortable ui-helper-reset">
			<li class="ui-state-highlight">Item 1</li>
			<li class="ui-state-highlight">Item 2</li>
			<li class="ui-state-highlight">Item 3</li>
			<li class="ui-state-highlight">Item 4</li>
			<li class="ui-state-highlight">Item 5</li>
		</ul>
	</div>
</div>

Bien evidement, je n'ai aucun problème pour afficher le contenu de ma BDD dans les différents div des différents tabs

Merci d'avance parce que j'y comprends plus rien à l'Ajax.

**t_ferreira** · 08/02/2011, 14h27

Bonjour à toi !

Je vais essayer d'expliquer un peu ce que j'ai compris.
On considère que tout ce qu'on fait, on le place dans l'évènement DROP.

En théorie tu peux récupérer la liste de chaque "onglet", plus précisément de chaque "sortable" en utilisant la méthode toArray() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var tab1 = $('#sortable1').sortable('toArray');
var tab2 = $('#sortable2').sortable('toArray');

Où tu peux ensuite récupérer les valeurs dans ces tableaux, les indices vont de 0 à x (tab1[0] serait égal à Item1).

Pour sauvegarder l'état d'un "li" qui passe d'un "tab" à un autre, tu peux utiliser le code que nous as partagé danielhagnoul un peu plus haut sur ce topic :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
//Tu as l'id de ton "li" -->
   var $id_du_li = ui.draggable.attr('id');
//Tu as l'id de l'onglet où se situait ton "li" -->
   var $id_ancien_onglet = ui.draggable.parent().attr('id');
//Et enfin l'id de l'onglet destinataire -->
   var $id_nouvel_onglet = event.target.id;

Avec ces infos, tu dois pouvoir savoir ce qu'est devenu le "li" et faire les modifications dans la BDD...

Personnellement j'utilise la méthode $.ajax de jQuery, je lui passe mes paramètres... ceci appelle une page php qui à pour rôle d'effectuer les modifs dans la BDD.

J'espère que ça pourra t'aider

**zibbu** · 08/02/2011, 16h53

2h que je teste plein de truc avec ce que tu m'as donné mais je ne fais que rendre inactif le code.

je cherche juste à sauvegarder les positions/ordres de chaque <li> pour les mettre à jour sur ma base de donnée mais j'ai pas l'impression que ce soit courant car je ne trouve que des portions de codes qui ne sauvegarde pas ou alors celle que je trouve ne fonctionne pas en Tab comme le code je souhaite utilisé :

http://jqueryui.com/demos/sortable/#...s-through-tabs

**zibbu** · 15/05/2011, 11h02

Bonjour à tous,

Après 3 mois de recherche et de tentative de code, je n'ai toujours pas réussi à rendre ce code jquery (http://jqueryui.com/demos/sortable/c...ough-tabs.html) sauvegardable.

Enfin si, j'arrive à sauvegarder le contenu et l'ordre de chaque onglet mais pas les changements de tabs.
En gros si je prends un element d'un tab pour le mettre dans un autre tab et que je sauvegarde, l'ordre et le contenu est sauvegarde sans tenir compte du fait qu'il y a un element nouveau.

Je n'ai pas su quoi faire de cette portion de code javascript puisque je comprends pas comment récupérer les informations de changement de tabs en PHP.

//Tu as l'id de ton "li" -->
var $id_du_li = ui.draggable.attr('id');
//Tu as l'id de l'onglet où se situait ton "li" -->
var $id_ancien_onglet = ui.draggable.parent().attr('id');
//Et enfin l'id de l'onglet destinataire -->
var $id_nouvel_onglet = event.target.id;

Si quelqu'un voudrait bien m'aider ?!

**t_ferreira** · 15/05/2011, 12h22

Bonjour,

Je pense qu'il s'agit d'un comportement normal, lorsque l'on récupère le "contenu" des onglets sur l'évènement du déplacement sur un tab, cela ne prend pas en compte la modification en cours.

Il faut donc à mon avis, gérer soi même ce qui va être ajouté ou retiré d'une des listes grâces aux quelques infos que l'on a.

UI Sortable et Tabs. Listes connectées et triables. Gestion des événements.

jQuery

Vue hybride

Discussions similaires

Partager

Partager