[AJAX] Ajax bloque le drag and drop

**pierrereed** · 28/02/2015, 22h34

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 : 100
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>

**ABCIWEB** · 01/03/2015, 02h43

Envoyé par pierrereed

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.

Je n'ai pas regardé ton code, mais sur le principe quand tu rafraîchi un élément, il perd toutes les fonctionnalités qui étaient programmées initialement. Il te faut donc réinitialiser la fonctionnalité drag an drop sur ce nouvel élément.

**pierrereed** · 01/03/2015, 10h12

Merci de ta réponse

En effet c'est une des pistes que j'avais exploré mais je n'ai pas trouvé comment tout relancé.
Le système fonctionne dès le chargement de la page principale sans lancer de fonction js. C'est une interaction entre js et la feuille de stle je pense
J'ai essayé en recopiant toute l'entête de la page principale mais ça n'a rien donné.
Comment faut il procéder ?

Merci

[AJAX] Ajax bloque le drag and drop

AJAX

Discussions similaires

Partager

Partager