Bonjour
je débute en javascript, j'ai besoin de faire glisser des images d'une zone A vers une zone B.
Le code suivant marche, mais n'est pas très propre
Code html : 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 <fieldset id="src" class="source"><legend>Source</legend> <table width="800" height="400" border="3" align="center" bordercolor="#000000"> <tr align="center" valign="middle"> <td width="200" height="200"> <img class="sequence" id="image_1_1" src="images/sequence_1_10.png" width="200" height="200"></td> <td width="200" height="200"> <img class="sequence" id="image_1_2" src="images/sequence_1_9.png" width="200" height="200"></td> <td width="200" height="200"> <img class="sequence" id="image_1_3" src="images/sequence_1_5.png" width="200" height="200"></td> <td width="200" height="200"> <img class="sequence" id="image_1_4" src="images/sequence_1_7.png" width="200" height="200"></td> </tr> <tr align="center" valign="middle"> <td width="200" height="200"> <img class="sequence" id="image_2_1" src="images/sequence_1_6.png" width="200" height="200"></td> <td width="200" height="200"> <img class="sequence" id="image_2_2" src="images/sequence_1_1.png" width="200" height="200"></td> <td width="200" height="200"> <img class="sequence" id="image_2_3" src="images/sequence_1_11.png" width="200" height="200"></td> <td width="200" height="200"> <img class="sequence" id="image_1_4" src="images/sequence_1_8.png" width="200" height="200"></td> </tr> </table> </fieldset> <br> <fieldset id="dest" class="destination"><legend>Destination</legend> <table width="900" height="150" border="3" align="center" bordercolor="#000000"> <tr> <td width="150" height="150"><div class="destArea" id="destArea1"></div></td> <td width="150" height="150"><div class="destArea" id="destArea2"></div></td> </tr> </table> </fieldset>
Celui-ci ne marche pas, pouvez vous m'éclairer. Merci
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 var dest=document.querySelectorAll('.destArea') var seq = document.querySelectorAll('.sequence'); for(var i = 0; i < seq.length; i++){ //src[i].setAttribute('draggable', 'true'); // optionnel avec des images seq[i].addEventListener('dragstart', function(evnt) { this.className = 'itemchoosen'; evnt.dataTransfer.effectAllowed = 'copy'; evnt.dataTransfer.setData('text', this.id); return false; }, false); } //zone1 dest[0].addEventListener('dragover', function(evnt){ if (evnt.preventDefault) evnt.preventDefault(); evnt.dataTransfer.dropEffect = 'copy'; return false; }, false); dest[0].addEventListener('dragenter', function(evnt){ return false; }, false); dest[0].addEventListener('dragleave', function(evnt){ return false; }, false); dest[0].addEventListener('drop', function(evnt){ if (evnt.stopPropagation) evnt.stopPropagation(); var id = evnt.dataTransfer.getData('text'); var theitem = document.getElementById(id); theitem.parentNode.removeChild(theitem); theitem.className='itemblurred'; var y = document.createElement('img'); y.src = theitem.src; dest[0].appendChild(y); evnt.preventDefault(); // pour Firefox return false; }, false); dest[0].addEventListener('dragover', function(evnt){ if (evnt.preventDefault) evnt.preventDefault(); evnt.dataTransfer.dropEffect = 'copy'; return false; }, false); dest[0].addEventListener('dragenter', function(evnt){ return false; }, false); dest[0].addEventListener('dragleave', function(evnt){ return false; }, false); dest[0].addEventListener('drop', function(evnt){ if (evnt.stopPropagation) evnt.stopPropagation(); var id = evnt.dataTransfer.getData('text'); var theitem = document.getElementById(id); theitem.parentNode.removeChild(theitem); theitem.className='itemblurred'; var y = document.createElement('img'); y.src = theitem.src; dest[0].appendChild(y); evnt.preventDefault(); // pour Firefox return false; }, false); //zone2 dest[1].addEventListener('dragover', function(evnt){ if (evnt.preventDefault) evnt.preventDefault(); evnt.dataTransfer.dropEffect = 'copy'; return false; }, false); dest[1].addEventListener('dragenter', function(evnt){ return false; }, false); dest[1].addEventListener('dragleave', function(evnt){ return false; }, false); dest[1].addEventListener('drop', function(evnt){ if (evnt.stopPropagation) evnt.stopPropagation(); var id = evnt.dataTransfer.getData('text'); var theitem = document.getElementById(id); theitem.parentNode.removeChild(theitem); theitem.className='itemblurred'; var y = document.createElement('img'); y.src = theitem.src; dest[1].appendChild(y); evnt.preventDefault(); // pour Firefox return false; }, false);
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 var dest=document.querySelectorAll('.destArea') var seq = document.querySelectorAll('.sequence'); for(var i = 0; i < seq.length; i++){ //src[i].setAttribute('draggable', 'true'); // optionnel avec des images seq[i].addEventListener('dragstart', function(evnt) { this.className = 'itemchoosen'; evnt.dataTransfer.effectAllowed = 'copy'; evnt.dataTransfer.setData('text', this.id); return false; }, false); } for(var i = 0; i <2; i++){ dest[i].addEventListener('dragover', function(evnt){ if (evnt.preventDefault) evnt.preventDefault(); evnt.dataTransfer.dropEffect = 'copy'; return false; }, false); dest[i].addEventListener('dragenter', function(evnt){ return false; }, false); dest[i].addEventListener('dragleave', function(evnt){ return false; }, false); dest[i].addEventListener('drop', function(evnt){ if (evnt.stopPropagation) evnt.stopPropagation(); var id = evnt.dataTransfer.getData('text'); var theitem = document.getElementById(id); theitem.parentNode.removeChild(theitem); theitem.className='itemblurred'; var y = document.createElement('img'); y.src = theitem.src; dest[i].appendChild(y); evnt.preventDefault(); // pour Firefox return false; }, false); }
Partager