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).