Discussion :

[Freeluvs]

Bonsoir à tous,

J'ai découvert il y a peu l'excellent jQuery UI, et surtout les possibilités qu'il offre pour faire du Drag and drop.
Voila mon soucis: j'arrive à utiliser sans soucis les fonctionnalités "draggable" et "droppable" de jQueryUI sur des <div>, mais dès que ses <div> sont générés en ajax (j'utilise la bibliothèque xAjax), impossible de les rendre "droppable".

En cherchant un peu dans la doc j'ai vu qu'il existait pour "draggable" la méthode refreshPosition, qui à chaque mouvement de souris rafraichis la liste des cible "droppable", mais ça ne fonctionne pas pour moi.
J'ai vu aussi que certains parlait de détruire les anciens éléments "droppable" et de les redéfinir, mais idem sans résultat.

Niveau code ça donne un truc comme ça :

-La declaration des drag & drop :

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
 
<script language="javascript">
	$(function() {
		$( "#elem_1" ).draggable({ refreshPosition: true, revert: 'invalid' });
		$( "#dropZone" ).droppable({
			activeClass: "ui-state-hover",
			hoverClass: "ui-state-active",
			drop: function( event, ui ) {
			$( this )
			.addClass( "ui-state-highlight" )
					 .html( "blabla" );
			}
		});
	});
</script>

En résumé la structure de mes div donne ça :

Code :

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

1
2
3
4
5
6
 
<div id="elem_1">Blabla</div>
 
<div id="general">
   <div id="dropZone"></div>
</div>

Et ma fonction Ajax qui met à jour la div#general fait ça:

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
 
...
<div id="dropZone"></div>
<script language="javascript">
	$(function() {
		$( "#dropZone" ).droppable({
			activeClass: "ui-state-hover",
			hoverClass: "ui-state-active",
			drop: function( event, ui ) {
			$( this )
			.addClass( "ui-state-highlight" )
					 .html( "blabla" );
			}
		});
	});
</script>

Si je met la div#dropZone en dehors de ce que génère ajax, ça fonctionne sans soucis (par contre je n'arrive pas à récupérer les info dynamique contenu dans div#general).
Mais dès que je la met dedans, meme si je la redeclare droppable, elle ne l'est pas.

Si quelqu'un à une idée la dessus, je suis preneur !
Merci d'avance

Edit: Je crois avoir trouvé. Quand je met un delais d'éxecution de 2 secondes entres le moment ou ajax change le code et ou j'applique les script qui mettent les droppable, ça fonctionne !

[SpaceFrog]

live()