Bonjour à tous,

Je suis en train de développer une page dans le style photobox pour permettre la composition d'un carnet de photos.

J'ai trouvé du js qui permet de drag and dropper des images d'un tableau vers un autre et ça fonctionne.
Ca c'est gâté quand j'ai voulu ajouter de l'ajax pour ne raffraîchir qu'une div de l'écran. je raffraichis la DIV mais le drag and drop ne fonctionne plus.

L'utilisateur aura le choix entre plusieurs banques de thèmes d'images : il pourra donc aller d'une banque à l'autre pour composer son carnet et donc il ne fat pas recharger la div du carnet sinon il se vide.

Ca fait plusieurs jours que je cherche mais franchement je sèche !

Merci de votre aide.

Voici à quoi ressemble le prototype :
Nom : carnet_siana - Google Chrome.jpg Affichages : 121 Taille : 81,8 Ko

Voici le php appelé en ajax : c'est le chargement de la banque dans le tableau de gauche

Code php : 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
 
        <?php
		//echo "<link rel=\"stylesheet\" href=\"style.css?refresh=".rand(2,200)."\" type= \"text/css\" media=\"screen\"/>";
		echo "<div id='left' class='noautoscroll' style='width: 131; height: 596'>";	
		echo "<table id='table1'>";
		echo "	<colgroup>";
		echo "		<col width='700'/>";
		echo "	</colgroup>";
		echo "	<tbody>";
 
		if(isset($_POST['th'])){
			$p=$_POST['th'];
		}	
		else
		{
			$p="theme1";
		}
 
		$dir = "../uploader/uploads/".$p;
 
		// Ouvre un dossier bien connu, et liste tous les fichiers
		if (is_dir($dir)) {
			if ($dh = opendir($dir)) {
				while (($file = readdir($dh)) !== false) {
					$f=$dir."/".$file;
					if($file != '.' && $file != '..'){
						echo "<tr  height=150>";											
							echo "<td align=\"center\" OnClick=\"OuverturePopup(".$f."\")><div id=\"".$file."\" class=\"drag\" style=text-align:center><img border=0 src=".$f." width=150 height=150 ></div></td>";											   							
						echo "</tr>";
					}
				}
				closedir($dh);
			}
		}
		echo "</tbody>";
		echo "</table>";	
		echo "</div>";		
	?>

Et le php appelant :

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta name="author" content="Darko Bunic"/>
		<meta name="description" content="Drag and drop table content with JavaScript"/>
		<meta name="viewport" content="width=device-width, user-scalable=no"/><!-- "position: fixed" fix for Android 2.2+ -->
		<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
		<title>carnet_siana</title>
		<script type="text/javascript" src="redips-drag-min.js"></script>	
		<script type="text/javascript" src="script.js"></script>
	</head>
 
	<script>	
		function loadpage(page_request, containerid){
 
			if (page_request.readyState == 4 && page_request.status == 200)
			{
				var e = document.getElementById(containerid);
				/*On ajoute le contenu de la réponse dans le Dom du document*/
				e.innerHTML = page_request.responseText;
				/*On évalue le javascript contenu dans les dom*/
				var scripts = e.getElementsByTagName('script');
				for(var i=0; i < scripts.length;i++)
				{
					window.eval(scripts[i].text);
				}
			}
		}	
 
		function changer_containerid(url, containerid, param1, param2){
			var page_request = false
			if (window.XMLHttpRequest){ // if Mozilla, Safari etc
				page_request = new XMLHttpRequest()
			}
			else if (window.ActiveXObject){ // if IE
				try {
					page_request = new ActiveXObject("Msxml2.XMLHTTP")
				}
				catch (e){
					try{
						page_request = new ActiveXObject("Microsoft.XMLHTTP")
					}
					catch (e){}
				}
			}
			else{
				return false
			}
			page_request.onreadystatechange=function(){
				loadpage(page_request, containerid)
			}
			page_request.open('POST', url, true)
			page_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			var data = "th=" + param1;
			page_request.send(data)
 
		}
	</script>
 
	<body>
 
        <p align="center">
		<b><font color="#0099FF" face="Calibri" size="7">Les carnets de Siana</font></b>	
 
		<div align =center>
			<select name="list_theme" onchange="changer_containerid('choix.php', 'left', this.value, '')" size=5>
			  <option  value="theme1">Japon</option>
			  <option  value="theme2">Porto</option>
			  <option  value="theme3">Venise</option>		  
			  <option  value="theme4">Seville</option>
			</select>		
		</div>	
 
		<div id="main_container" style="width: 928; height: 848">
			<div id="drag" style="width: 928; height: 807">
 
 
						<?php
                                                        include_once('choix.php');
                                                ?>
 
				<!-- album ********************************************************-->			
 
				<div id="right" style="width: 946; height: 172">
					<table id="tables2">
						<tbody>
							<tr height=150 >
								<td id="Page 1" width=150 ></td>
								<td id="Page 2" width=150 ></td>
								<td id="Page 3" width=150 ></td>
								<td id="Page 4" width=150 ></td>
								<td id="Page 5" width=150 ></td>				
								<td id="Page 6" width=150 ></td>								
								<td id="Page 7" width=150 ></td>
								<td id="Page 8" width=150></td>
								<td id="Page 9" width=150></td>
								<td id="Page 10" width=150></td>
								<td id="Page 11" width=150></td>
								<td id="Page 12" width=150></td>								
								<td id="Page 13" width=150></td>								
								<td id="Page 14" width=150></td>			
								<td id="Page 15" width=150></td>
								<td id="Page 16" width=150></td>
								<td id="Page 17" width=150></td>
								<td id="Page 18" width=150></td>								
								<td id="Page 19" width=150></td>								
								<td id="Page 20" width=150></td>															
							</tr>
							<tr  >
								<td width=150 class="mark dark">1</td>
								<td width=150 class="mark dark">2</td>
								<td width=150 class="mark dark">3</td>
								<td width=150 class="mark dark">4</td>
								<td width=150 class="mark dark">5</td>
								<td width=150 class="mark dark">6</td>
								<td width=150 class="mark dark">7</td>
								<td width=150 class="mark dark">8</td>
								<td width=150 class="mark dark">9</td>
								<td width=150 class="mark dark">10</td>								
								<td width=150 class="mark dark">11</td>
								<td width=150 class="mark dark">12</td>
								<td width=150 class="mark dark">13</td>
								<td width=150 class="mark dark">14</td>
								<td width=150 class="mark dark">15</td>
								<td width=150 class="mark dark">16</td>
								<td width=150 class="mark dark">17</td>
								<td width=150 class="mark dark">18</td>
								<td width=150 class="mark dark">19</td>
								<td width=150 class="mark dark">20</td>																
							</tr>
						</tbody>
					</table>
 
				</div><!-- right container -->
				<div id="message"></div>		
 
				<br><br>
				<div  align=center>
					<table id="mini" border=0 cellpadding=0 style="noborder">
							<tr >
								<!-- trash cell -->
								<td  class="trash"><img src="../images/poubelle.jpg" border="0"></td>
							</tr>
					</table>
				</div>				
			</div><!-- drag container -->
			<!-- needed for cloning DIV elements -->
		</div>
 
		<p>
		<p>
			<div><input type="button" value="Sauver" class="button" onclick="save('plain')" "/></div>
 
	</body>
</html>