Drag & Drop d'images - affichage calcul erroné
Bonjour,
Je cherche à créer un site étant capable de calculer des images que je Drag & Drop, petit problème une fois mon image dans le conteneur de droite (conteneur d'arrivée faisant le calcul), un message d'erreur s'affiche la ou le résultat devrait s'afficher : "NaN" (not a number), donc je pense que mon data-value n'est pas reconnu comme un nombre mais pourquoi? J’espère que quelqu'un pourra me venir en aide car la je sèche, de plus si quelqu'un pourrais me dire comment enlever l'image une fois qu'elle est dans le conteneur sa me serais d'une grand aide, et finalement si quelqu'un c'est comment aussi je pourrais faire pour afficher 2 résultats car je cherche a calculer le nombre de points et le nombre d'euros de chaque image, donc si il existerait une sorte de data-value2? Merci beaucoup d'avance et j’espère que vous parviendrez a me venir en aide! :-D
PS: Je met les pièces jointes du code contenant mes images avec leurs propriétés et le java script permettant de faire le drag & drop et celui permettant le calcul.
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
|
<script>
var cartArea = document.querySelector('#cartArea');
var prods = document.querySelectorAll('.product');
for(var i = 0; i < prods.length; i++)
{
prods[i].setAttribute('draggable', 'true');
prods[i].addEventListener('dragstart', function(evnt) {
this.className = 'itemchoosen';
evnt.dataTransfer.effectAllowed = 'copy';
evnt.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);
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 = document.createElement('img');
y.src = theitem.src;
cartArea.appendChild(y);
evnt.preventDefault();
return false;
}, false);
function Update()
{
var Enfants = document.getElementById("cartArea").childNodes;
var Totalprice = 0;
for(var k = 0; k < Enfants.length; k++)
{
if(Enfants[k].nodeType == 1)
{
Totalprice += parseInt(Enfants[k].getAttribute("data-value"));
}
}
document.getElementsByTagName("div")[1].getElementsByTagName("header")[0].getElementsByTagName("h2")[0]
.innerHTML = "TOTAL: " + String(Totalprice) + "pts";
}
window.onload = function()
{
document.getElementById("boxA").addEventListener("drop", Update, false);
document.getElementById("cartArea").addEventListener("drop", Update, false);
}
</script> |
Et voila le code que je fait apparaitre par php et le deuxieme conteneur ou j'envoi mes images:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<div class="background" draggable="true" id="boxA">
<p class=floatleft> <img 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-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-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-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-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-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-value=7 class=product id=Breacher_Team src =/theo.briollet/projet07_projetbac/images/Breacher_Team.jpg height=140width=140> <br/>Breacher_Team</br>7pts-40€ <br/> <p class=floatleft> <img data-value=5 class=product id=Kroot_Carnivores src =/theo.briollet/projet07_projetbac/images/Kroot_Carnivores.jpg height=140width=140> <br/>Kroot_Carnivores</br>5pts-30€ <br/> <p class=floatleft> <img data-value=7 class=product id=Strike_Team src =/theo.briollet/projet07_projetbac/images/Strike_Team.jpg height=140width=140> <br/>Strike_Team</br>7pts-40€ <br/> <p class=floatleft> <img 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-value=42 class=product id=Crisis_Battlesuit src =/theo.briollet/projet07_projetbac/images/Crisis_Battlesuit.jpg height=140width=140> <br/>Crisis_Battlesuit</br>42pts-60€ <br/> <p class=floatleft> <img data-value=45 class=product id=Crisis_Bodyguards src =/theo.briollet/projet07_projetbac/images/Crisis_Bodyguards.jpg height=140width=140> <br/>Crisis_Bodyguards</br>45pts-60€ <br/>
</div>
<section class="background2" id="cartArea">
</section>
<div class="resultat">
<header>
<h2> TOTAL: 0pts </h2>
</header>
</div> |
