1 pièce(s) jointe(s)
[AJAX] Ajax bloque le drag and drop
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 ! :oops:
Merci de votre aide.
Voici à quoi ressemble le prototype :
Pièce jointe 170396
Voici le php appelé en ajax : c'est le chargement de la banque dans le tableau de gauche
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
|
<?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:
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> |
