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 !