DND dans un tableau mode IGoogle
Bonjour, voici mon code:
Code:
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
| * 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){
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",event.target.getAttribute('id'));
this.style["border"]="none";
};
Tab_items[i].ondragover=function(event){this.style["border"] = "1px dashed #AAA";return false;};
Tab_items[i].onBlur=function(event){this.style["border"] = "inherit";return false;};
Tab_items[i].onDragOut = function(event) {this.style["border"] ="inherit";};
Tab_items[i].ondrop=function(event){/*Apres lacher de souris*/
var element = event.dataTransfer.getData("Text");
if(event.target.className == "haut_boite") {
var temp =document.getElementById();// var temporaire de la cible
event.target.appendChild(document.getElementById(element));
event.source.appendChild = temp;// affectation de la var temp à la boite source du DnD
}
else{
event.target.appendChild(document.getElementById(element));
}
event.stopPropagation();//arrete l'evenement (dragover) pour permettre le drop
return false;
};
}
catch (e) {};
};
};
}; |
Mon problème est que lorsque je deplace mon Div, d'une cellule a l'autre du tableau, si je passe dans mon ELSE, j'ai bien mon élèment qui s'ajoute (appendchild), mais si je passe de mon IF... je n'obtient pas l'évènement souhaité.
Je voudrais a la mode IGOOGLE, faire en sorte que mon Div déplacé(ondrag) switch avec le Div target (ondrop).
Pour le moment mon Div déplacé, s'ajoute a l'interieur du Div ciblé.
J'ai remarqué que mon Tab_items[i] est undefined a partir des fonctions qui sont dans mon TRY, mais est correctement définis avant celles ci...
Deuxiemement, si je repositionne mon Div déplacé dans son TD d'origine (sans l'avoir drop dans un autre TD entre temps), le navigateur charge alors une url sous cette forme : Http://IDdiv.com par exemple http://BOX01.com
Voilas, j'arrive pas a régler ce problème.
Voici la forme de mon tableau:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <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> |
