Bonjour, je veux réaliser un tableau capable de contenir des "boites" draggables entre elles a la mode IGOOGLE.

Voici mon tableau:
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="corps">
 
					<span style="border:none; background:none; width:100%; display:block;">
						<table width="100%" cellpadding="10px" cellspacing="10px">
						   <tr>
		                <!--boite1--><td align="left" style="text-align:left;" d="y">
						   <div ID="BOX01" class="boite" style="top:15;left:5;height:150;width:220;" draggable="true";>
                          <img class="agrandir" src="images/bt_agrandir.png" onclick="agrandir()";>
						  <img class="outils" src="images/bt_outils.png" onclick="">
<div style="cursor:move;" class="haut_boite">
	<span id="TBOX01" class="titrebox flol">Box numero 1</span>
</div>
<div id="dtabox01" class="boite_IN"><iframe name="iFBOX01" id="iFBOX01" src="" frameborder="0" height="100%" scrolling="auto" width="100%"></iframe></div>
</div>						</td>
 
						 <!--boite2-->...
Voici maintenant mon code HTML5/Javascript:
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/* traduit getElementById pour chaque navi*/	
	function leID(lelayer){
		group=(isNN4)?document.layers[lelayer]:(isIE)?document.all[lelayer]:(isDOM)?document.getElementById(lelayer):null;
		return group;
						}
 
	function genDrag(typTag,le_frm){
	var dragSrcEl = null;// variable de l'élement source du dnd initialiser a null
		if (typTag==''&&typTag==undefined) typTag='td';
		This_FRM=leID(le_frm);
		if (This_FRM==null) return false;
		var Tab_items=This_FRM.getElementsByTagName(typTag.toString());//creation tableau 
 
        for (var i= 0; i < Tab_items.length; i++)
			{
				try{A_traiter=Tab_items[i].getAttribute("d").toString(); }//traiter que les TD d=y
				catch (e) {A_traiter='erreur';}
					if (A_traiter=='y')
						{
 
						try
						{ 
					//alert(Tab_items[i]);
						 Tab_items[i].ondragstart=function(event){
						 event.dataTransfer.effectAllowed = 'move';
						 event.dataTransfer.setData('text/html', this.innerHTML);// on récupere les information de l'objet drager						 
						 this.style["border"]="none"; 
						 this.style.opacity = "0.4";
						 dragSrcEl = this;// on affecte le contenu du innerhtml a la var dragSrcEl 
						 }; 
						 Tab_items[i].ondragenter=function(event){this.style["border"] = "1px dashed #AAA";return false;};
						 Tab_items[i].ondragleave=function(event){this.style["border"] = "none"; this.style.opacity = "1";return false;};
						 Tab_items[i].ondragover=function(event){this.style["border"] = "1px dashed #AAA";
						  if (event.preventDefault) {
                          event.preventDefault(); // Permet le drop
						 return false;
						 };	 
						 Tab_items[i].onDragOut = function(event) {this.style["border"] ="none";};
						 Tab_items[i].ondrop=function(event){/*Apres lacher de souris*/
						      this.style["border"] = "none";					 	
 
 
							  if (event.stopPropagation) {
								event.stopPropagation(); // Arrete les redirections
							  }
 
						      if (dragSrcEl != this) {
									// Gere le switch entre les deux elements
									dragSrcEl.innerHTML = this.innerHTML;
									this.innerHTML = event.dataTransfer.getData('text/html');
														}
 
								return false;
								}
 
 
 
 
 
 
 
															};
															}
						catch (e) {};
 
 
						};
			};
			};
Le principe est pourtant simple mais je ne comprend pas pourquoi je n'arrive pas a faire mon drag and drop en effectuant un effet de "switch" entre la boite drager et la boite cible... Si quelqu'un peux m'aider.

Merci d'avance.