Bonjour,
je débute en HTML5 et je recherche des pistes qui m'aideraient à résoudre ce problème :
j'ai deux zones : à gauche, la zone dédiée aux articles disponibles comprenant des div drag-and-droppables dans la zone de droite (mon panier).
J'aimerais que chaque div comporte une valeur invisible qui s'ajoute au "total courses" quand droppé dans "mon panier" et retranchée si article remis dans "articles disponibles".
Mes questions sont : existe t'il un moyen en html5 (via set/getData - localStorage ?)
- d'allouer une valeur numérique invisible à chaque div ?
- de faire en sorte que les additions/soustractions se fassent automatiquement ?
- et que le résultat soit affiché à la suite de "total courses"
En théorie ça me paraissait plutôt simple, sauf qu'en pratique je rame
Le truc est ici : http://fluosaure.com/test/dragtest2.html
Voila le code actuel de la page :
Je serai infiniment reconnaissant à toute personne qui pourrait m'aiguiller, un peu, beaucoup...
D'avance merci
Guillaume
Modifié par GSI (18 Mar 2012 - 13:21)
je débute en HTML5 et je recherche des pistes qui m'aideraient à résoudre ce problème :
j'ai deux zones : à gauche, la zone dédiée aux articles disponibles comprenant des div drag-and-droppables dans la zone de droite (mon panier).
J'aimerais que chaque div comporte une valeur invisible qui s'ajoute au "total courses" quand droppé dans "mon panier" et retranchée si article remis dans "articles disponibles".
Mes questions sont : existe t'il un moyen en html5 (via set/getData - localStorage ?)
- d'allouer une valeur numérique invisible à chaque div ?
- de faire en sorte que les additions/soustractions se fassent automatiquement ?
- et que le résultat soit affiché à la suite de "total courses"
En théorie ça me paraissait plutôt simple, sauf qu'en pratique je rame
Le truc est ici : http://fluosaure.com/test/dragtest2.html
Voila le code actuel de la page :
<script>
function dragDefine(ev) {
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData("text/plain", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target, 0, 0);
return true;
}
function dragOver(ev) {
ev.preventDefault();
}
function dragEnd(ev) {
return true;
}
function dragDrop(ev) {
var idDrag = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(idDrag));
ev.preventDefault();
}
</script>
</head>
<body>
<article>
<header>
<h1>Ma liste de courses</h1>
</header>
<section>
<div id="boxA" ondragover="dragOver(event)" ondrop="dragDrop(event)">articles disponibles
<div id="word1" class="word" draggable="true" ondragstart="return dragDefine(event)" ondragend="dragEnd(event)">Yaourts aux fruits</div>
<div id="word2" class="word" draggable="true" ondragstart="return dragDefine(event)" ondragend="dragEnd(event)">Quiche lorraine</div>
<div id="word3" class="word" draggable="true" ondragstart="return dragDefine(event)" ondragend="dragEnd(event)">Sauce tomate</div>
<div id="word4" class="word" draggable="true" ondragstart="return dragDefine(event)" ondragend="dragEnd(event)">Côte de boeuf</div>
<div id="word5" class="word" draggable="true" ondragstart="return dragDefine(event)" ondragend="dragEnd(event)">Bon pinard</div>
</div>
<div id="boxB" ondragover="return dragOver(event)" ondrop="dragDrop(event)">Mon panier</div>
</section>
<section>
<header>
<h3>Total courses : 0€</h3>
</header>
</section>
</article>
</body>
</html>
Je serai infiniment reconnaissant à toute personne qui pourrait m'aiguiller, un peu, beaucoup...
D'avance merci
Guillaume
Modifié par GSI (18 Mar 2012 - 13:21)
