Discussion :

[rioll]

Bonjour, j'ai actuellement quelques probl�mes sur mon d�veloppement d'application en JS.

Je souhaite faire un tableau au seins de mon<span> lui meme compris dans <div id="corps"> .

Ce tableau comprend 3*3 cellules, comportant des <td> ayant pour attribut "d=y"( que je reprend dans mes fonctions JS, pour l'identifier).

Au seins de ces TD jai des <Div> acceuillant des "widgets" Je veux rendre ceux ci draggable entre eux.

J'arrive pour le moment a bouger les TD entre eux, cependant je n'ai pas l'effet de "switch" entre ceux ci.

Pour etre plus clair, mon Div que je deplace ne remplace pas le Div cibler, il s'ajoute a la suite ( insert.before j'ai tenter "replaceChild" mais sa ne fonctionne toujours pas).

Je ne sais pas comment regler ce probl�me...

Autre soucis, quand je prend un �l�ment draggable et que je le repositionne dans sont emplacement d'origine, cela me charge une page internet comportant l'ID de cette �l�ment dans l'url (ex: Je bouge BOX1 de son TD et le replace dedans, le navigateur charge alors =>http:// BOX1.com).

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
 
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
						{ 
						 Tab_items[i].ondragstart=function(event){event.dataTransfer.effectAllowed = 'move';event.dataTransfer.setData("Text", event.target.getAttribute('id'));this.style["border"]="1px solid red"; }; 
						 Tab_items[i].ondragover=function(event){this.style["border"] = "1px dashed #AAA";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") {
								event.target.parentNode.replaceChild(document.getElementById(element), event.target);
																	   }
							else{
								event.target.appendChild(document.getElementById(element));
                                }
 
							event.stopPropagation();//arrete l'evenement (dragover)
							return false;
 
															};
						}
	catch (e) {};
						};
			};
 
 
 
 
							};

Je n'utilise aucune librairie et le Jquery est exclus.

Merci d'avance.

[ticroch]

oui montre nous un exemple de ton code pour qu'on puisse t'aider !!

[rioll]

Voilas ma fonction principale
Mon tableau a donc des TD ayant pour attribut "d=y"

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
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
						{ 
						 Tab_items[i].ondragstart=function(event){event.dataTransfer.effectAllowed = 'move';event.dataTransfer.setData("Text", event.target.getAttribute('id'));this.style["border"]="1px solid red"; }; 
						 Tab_items[i].ondragover=function(event){this.style["border"] = "1px dashed #AAA";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") {
								event.target.parentNode.replaceChild(document.getElementById(element), event.target);
																	   }
							else{
								event.target.appendChild(document.getElementById(element));
                                }
 
							event.stopPropagation();//arrete l'evenement (dragover)
							return false;
 
															};
						}
	catch (e) {};
						};
			};
 
 
 
 
							};

[rioll]

J'ai tent� de proc�der autrement, en stockant la position x/y de ma Div ondrag dans des variables et en restituant ces valeurs � ma Div Target (on drop)...

Je n'ai pas r�ussi, j'ai d� me tromper quelque part...

[rioll]

Je reprend mon projet et je rebloque.

Voilas la forme de mon Tableau si sa peux aider.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
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";>
                         <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>

J'ai toujours le probleme de Switch entre mon Div deplacer et mon Div deja present dans le TD.
Et le probleme d'url ,quand je prend un �l�ment draggable et que je le repositionne dans sont emplacement d'origine, cela me charge une page internet comportant l'ID de cette �l�ment dans l'url (ex: Je bouge BOX1 de son TD et le replace dedans, le navigateur charge alors =>http:// BOX1.com).