Discussion :

[tapoutapou]

J'ai un tableau défini comme suit:

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
<table>
<thead >
   <tr ><th id="titreTable" colspan="6">Contrat 1</th></tr>		
</thead>
 
<tr>
   <td class="encadre titre" >Véhicules</td>
   <td id="Node2000" class="container encadre" ></td>		
   <td id="Node2001" class="container encadre" ></td>
</tr>
 
<tr>
   <td id="aNode" class="encadre titre hauteur35">Années</td>
   <td class="encadre hauteur35" > 2000 </td>
   <td class="encadre hauteur35" > 2001 </td>
</tr>
</table>

Et j'y insère des éléments de la manière suivante:

Code :

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

1
2
3
4
5
6
7
8
var colonne2000 = new dojo.dnd.Source("Node2000", {accept: ["libre"]});
colonne2000.insertNodes(false, [
	{ data: "vehicule1 ",     	   type: ["libre"] },
	{ data: "vehicule2 ",    	   type: ["libre"] }
]);
colonne2000.forInItems(function(item, id, map){
	dojo.addClass(id, item.type[0]);       
});

Mon problème est que dans chaque colonne, l'espacement entre les données que j'ajoute n'est pas grand, si bien qu'il suffit que je leur mette un petit cadre pour qu'on ait l'impression qu'ils se chevauchent.

J'ai essayé de modifier les paramètres css de la colonne, mais je ne trouve pas de solution.

PS: Je n'utilise pas de dojox.grid.DataGrid parce que j'ai besoin de faire du dran'n'drop avec les différents éléments de chaque colonne, et quand j'utilise une DataGrid je n'y arrive pas.

[tapoutapou]

Deuxième question:

Pour le moment je ne peux insérer que des éléments de type data
J'aimerais bien insérer des images également. Est-ce possible?

[tapoutapou]

J'ai vraiment besoin d'insérer des images . Si quelqu'un a la moindre idée, je prends avec plaisir

[Daniel_Gibot]

Bonjour,

Tu trouveras un excellent tutoriel (en anglais) sur le drag n drop ici
De plus, une doc générale avec des exemples sur ce site te permettra aussi d'y voir plus clair sur les drag n drop.

En ce qui concerne les images, étant donné que le contenu de tes "nodes" est dans le "innerHTML" de celui-ci, tu dois pouvoir insérer des images. Mais je n'ai jamais essayé c'est de la théorie

A+

[tapoutapou]

Merci pour les liens, je vais y jeter un coup d'oeil de ce pas.

[tapoutapou]

Malheureusement, ce sont des sites où je suis déjà allé quelques fois. Je m'occuperai des images plus tard.

Quand au problème de superposition, je pense avoir un début de solution. Je pense que dans mes colonnes, au lieu de faire les insertions de données sous la forme

Code :

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

1
2
3
colonne2000.insertNodes(false, [
	{ data: "vehicule2 ",   type: ["libre"] }
]);

je devrais plutôt insérer un div dans lequel j'insère le data
Pour l'instant je n'y arrive pas, mais je cherche

[tapoutapou]

Est-ce que quelqu'un pourrait me dire l'erreur dans la ligne suivante:

Code :

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

dojo.create('div',{innerHTML:"aaaaaaaa"},dojo.query('#Node2000'),'after');

[Daniel_Gibot]

A partir des exemples, j'ai fait un autre exemple...
Voici le code javascript exécuté au chargement. Tu remarqueras que j'y ai ajouté une balise "<img" histoire de tester si on peut faire du dnd avec (pour info ca fonctionne ).

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
 
dojo.addOnLoad(function(){
	var catalogue = new dojo.dnd.Source("Catalogue", {accept: ["inStock","outOfStock"]});
	catalogue.insertNodes(false, [
		{ data: "<img src='monImage.png'>",        type: ["inStock"] },
		{ data: "Life jacket",        type: ["inStock"] },
		{ data: "Toy bulldozer",      type: ["inStock"] },
		{ data: "Vintage microphone", type: ["outOfStock"] },
		{ data: "TIE fighter",        type: ["outOfStock"] },
		{ data: "Apples",             type: ["inStock"] },
		{ data: "Bananas",            type: ["inStock"] },
		{ data: "Tomatoes",           type: ["outOfStock"] },
		{ data: "Bread",              type: ["inStock"] }
	]);
 
	var souhait = new dojo.dnd.Source("Souhait", {accept: ["inStock"]});
});

Et là c'est le code html. A noter que j'utilise des balises "<ul>" pour ordonner mes dndTypes. Ca peut peut etre arranger ton soucis de superposition.

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
 
<table id='matable'>
	<tr>
		<td align='center'>Choix</td>
		<td align='center'>Souhait</td>
	</tr>
	<tr>
		<td valign="top" align="left">
			<ul id='Catalogue' style='height:100px;width:150px'></ul>
		</td>
		<td align="left" valign="top">
			<ul id='Souhait' style='height:100px;width:150px'></ul>
		</td>
	</tr>
</table>

Je te joins aussi un css que j'avais recupere sur un site (je ne sais plus lequel).
dnd_perso.css

[tapoutapou]

YOUPIIIIIIII !
Tous ces petites problèmes sont réglés. Merci beaucoup, Daniel.
J'espère que, petit à petit, j'arriverai à trouver les solutions tout seul ^^

[tapoutapou]

A propos du problème de superposition, des <div> font l'affaire, tout comme des <ul>.

Néanmoins, en travaillant avec des images, le problème disparaît, donc j'insère directement mes éléments(mes petites images) dans les <td>