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>

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);
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
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);
}