Bonjour,
Je travail depuis de nombreuse heures sur un site me permettant de calculer des images stocké dans un inventaire et que l'ont déplace via drag & drop, mais je sèche je n'arrive pas a trouver comment les enlever une fois qu'elles sont déplacer sans pour autant supprimer l'image de l'inventaire... Je vous met le code ci-dessous je pense que le probème viens du fait qu'il faudrais créer une class a l'image déplacer pour ne pas reemploycer le ".product" mais je ne suis pas un professionel du java, j'espere que quelqu'un pourra me venir en aide.
Voici le code java pemettant de déplacer l'image du conteneur 1 ou conteneur 2 puis du 2 au 3, (le probleme est entre le 2-3; le 3 étant la poubelle, et le 2 celui calculant).
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
<script>
var cartArea = document.querySelector('#cartArea');
var poubelle = document.querySelector('#poubelle');  
 
var prods = document.querySelectorAll('.product');
var prods2 = document.querySelectorAll('.product');
for(var i = 0; i < prods.length; i++)
{
	prods[i].addEventListener('dragstart', function(evnt) {
		this.className = 'itemchoosen';
		evnt.dataTransfer.effectAllowed = 'copy';
		evnt.dataTransfer.setData('text', this.id);
		return false;  
	}, false); 
    prods2[i].addEventListener('dragstart', function(evnt2) {
		this.className = 'itemchoosen';
		evnt2.dataTransfer.effectAllowed = 'copy';
		evnt2.dataTransfer.setData('text', this.id);
		return false;  
	}, false);
}	
 
 
cartArea.addEventListener('dragover', function(evnt) {
		if (evnt.preventDefault) evnt.preventDefault();
		evnt.dataTransfer.dropEffect = 'copy';
		return false;	
}, false);
 
cartArea.addEventListener('dragenter', function(evnt) {
		return false;	
}, false);
 
cartArea.addEventListener('dragleave', function(evnt) {
		return false;
}, false);  
 
poubelle.addEventListener('dragover', function(evnt2) {
		if (evnt2.preventDefault) evnt2.preventDefault();
		evnt2.dataTransfer.dropEffect = 'copy';
		return false;	
}, false);
 
poubelle.addEventListener('dragenter', function(evnt2) {
		return false;	
}, false);
 
poubelle.addEventListener('dragleave', function(evnt2) {
		return false;
}, false);
 
cartArea.addEventListener('drop', function(evnt) {
	if (evnt.stopPropagation) evnt.stopPropagation();
	var id = evnt.dataTransfer.getData('text');		
	var theitem = document.getElementById(id);		
	theitem.className='itemblurred';
	var y  = theitem.cloneNode( true);
	cartArea.appendChild(y);
	evnt.preventDefault();
	return false;
}, false);
 
poubelle.addEventListener('drop', function(evnt2) {
	if (evnt2.stopPropagation) evnt2.stopPropagation();
	var id2 = evnt2.dataTransfer.getData('text');		
	var theitem2 = document.getElementById(id2);	
    theitem2.parentNode.removeChild(el);	
	theitem2.className='itemblurred';
	var y2  = document.createElement('img');
	y2.src = theitem2.src;
	poubelle.appendChild(y);
	evnt2.preventDefault();
	return false;
}, false);
 
</script>
Et voici les images que je fais apparaitre dans le conteneur 1 via php avec leurs id....Ainsi que les 3 conteneur (inventaire, calculateur et poubelle)
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
    <div class="background" id="boxA">
        <p class=floatleft> <img data-value2=25 data-value=39 class=product id=Cadre_Fireblade src =/theo.briollet/projet07_projetbac/images/Cadre_Fireblade.jpg height=140width=140> <br/>Cadre_Fireblade</br>39pts-25€ <br/> <p class=floatleft> <img data-value2=60 data-value=72 class=product id=Commander_Crisis src =/theo.briollet/projet07_projetbac/images/Commander_Crisis.jpg height=140width=140> <br/>Commander_Crisis</br>72pts-60€ <br/> <p class=floatleft> <img data-value2=40 data-value=76 class=product id=Enforcer_Battlesuit src =/theo.briollet/projet07_projetbac/images/Enforcer_Battlesuit.jpg height=140width=140> <br/>Enforcer_Battlesuit</br>76pts-40€ <br/> <p class=floatleft> <img data-value2=13 data-value=45 class=product id=Ethereal src =/theo.briollet/projet07_projetbac/images/Ethereal.jpg height=140width=140> <br/>Ethereal</br>45pts-13€ <br/> <p class=floatleft> <img data-value2=13 data-value=50 class=product id=Ethereal_Drone src =/theo.briollet/projet07_projetbac/images/Ethereal_Drone.jpg height=140width=140> <br/>Ethereal_Drone</br>50pts-13€ <br/> <p class=floatleft> <img data-value2=13 data-value=137 class=product id=Longstrike src =/theo.briollet/projet07_projetbac/images/Longstrike.jpg height=140width=140> <br/>Longstrike</br>137pts-13€ <br/> <p class=floatleft> <img data-value2=40 data-value=70 class=product id=Breacher_Team src =/theo.briollet/projet07_projetbac/images/Breacher_Team.jpg height=140width=140> <br/>Breacher_Team</br>70pts-40€ <br/> <p class=floatleft> <img data-value2=30 data-value=80 class=product id=Kroot_Carnivores src =/theo.briollet/projet07_projetbac/images/Kroot_Carnivores.jpg height=140width=140> <br/>Kroot_Carnivores</br>80pts-30€ <br/> <p class=floatleft> <img data-value2=40 data-value=70 class=product id=Strike_Team src =/theo.briollet/projet07_projetbac/images/Strike_Team.jpg height=140width=140> <br/>Strike_Team</br>70pts-40€ <br/> <p class=floatleft> <img data-value2=30 data-value=80 class=product id=TY7_Devilfish src =/theo.briollet/projet07_projetbac/images/TY7_Devilfish.jpg height=140width=140> <br/>TY7_Devilfish</br>80pts-30€ <br/> <p class=floatleft> <img data-value2=60 data-value=126 class=product id=Crisis_Battlesuit src =/theo.briollet/projet07_projetbac/images/Crisis_Battlesuit.jpg height=140width=140> <br/>Crisis_Battlesuit</br>126pts-60€ <br/> <p class=floatleft> <img data-value2=60 data-value=135 class=product id=Crisis_Bodyguards src =/theo.briollet/projet07_projetbac/images/Crisis_Bodyguards.jpg height=140width=140> <br/>Crisis_Bodyguards</br>135pts-60€ <br/> <p class=floatleft> <img data-value2=34 data-value=21 class=product id=Marksman src =/theo.briollet/projet07_projetbac/images/Marksman.jpg height=140width=140> <br/>Marksman</br>21pts-34€ <br/> <p class=floatleft> <img data-value2=60 data-value=82 class=product id=XV95_Ghostkeel src =/theo.briollet/projet07_projetbac/images/XV95_Ghostkeel.jpg height=140width=140> <br/>XV95_Ghostkeel</br>82pts-60€ <br/> <p class=floatleft> <img data-value2=21 data-value=34 class=product id=Krootox_Riders src =/theo.briollet/projet07_projetbac/images/Krootox_Riders.jpg height=140width=140> <br/>Krootox_Riders</br>34pts-21€ <br/> <p class=floatleft> <img data-value2=11 data-value=31 class=product id=Kroot_Shaper src =/theo.briollet/projet07_projetbac/images/Kroot_Shaper.jpg height=140width=140> <br/>Kroot_Shaper</br>31pts-11€ <br/> <p class=floatleft> <img data-value2=65 data-value=185 class=product id=XV104_Riptide src =/theo.briollet/projet07_projetbac/images/XV104_Riptide.jpg height=140width=140> <br/>XV104_Riptide</br>185pts-65€ <br/> <p class=floatleft> <img data-value2=21 data-value=60 class=product id=XV25_Stealth src =/theo.briollet/projet07_projetbac/images/XV25_Stealth.jpg height=140width=140> <br/>XV25_Stealth</br>60pts-21€ <br/>  
    </div>
 
<section class="background2" id="cartArea"> 
 
</section>
 
<div class="resultat">                       
    <header> 
        <h2> TOTAL: 0pts 0€</h2> 
    </header>
</div> 
 
<div class="poubelle" id="poubelle">
 
</div>