Puedo arrastrar y soltar las imágenes en las cestas. Pero el valor va a los puntos negativos cuando intento arrastrar y soltar la imagen de la cesta 1 a la cesta 1. Y el valor va a los puntos positivos cuando intento arrastrar y soltar la imagen de la cesta 2 a la cesta 2.

Por ejemplo, cuando intento arrastrar y soltar la imagen de sandía de la cesta 1 a la cesta 1, los puntos disminuyen en 30.

Y cuando trato de arrastrar y soltar los elementos de la cesta 2 en la cesta 2, el valor pasa a puntos positivos.

Cómo mantener los valores iguales al intentar arrastrar y soltar los artículos en las mismas cestas

Aquí hay un guión

<script type="text/javascript">
var myscore=0;
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
function dragEnter(ev) {
event.preventDefault();
return true;
}
function dragOver(ev) {
return false;
}
function dragDrop1(ev) {

var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
var cal=0;
switch(src){
case "image1": cal = 20; break;
case "image2": cal = 30; break;
case "image3": cal = 40; break;
case "image4": cal = 50; break;
case "image5": cal = 60; break;
default: cal=10;
}

myscore=myscore-cal;
document.getElementById('Score').innerHTML=myscore;
return false;
}
function dragDrop2(ev) {

var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
var cal=0;
switch(src){
case "image1": cal = 20; break;
case "image2": cal = 30; break;
case "image3": cal = 40; break;
case "image4": cal = 50; break;
case "image5": cal = 60; break;
default: cal=10;
}
myscore=myscore+cal;
document.getElementById('Score').innerHTML=myscore;
return false;
}

</script>

Aquí hay un Fiddle

0
James 31 ago. 2014 a las 01:19

2 respuestas

La mejor respuesta
<script type="text/javascript">
var myscore=0;
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
function dragEnter(ev) {
event.preventDefault();
return true;
}
function dragOver(ev) {
return false;
}
function dragDrop1(ev) {

var src = ev.dataTransfer.getData("Text");
if(!ev.target.contains(document.getElementById(src))){
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
var cal=0;
switch(src){
case "image1": cal = 20; break;
case "image2": cal = 30; break;
case "image3": cal = 40; break;
case "image4": cal = 50; break;
case "image5": cal = 60; break;
default: cal=10;
}
myscore=myscore-cal;
document.getElementById('Score').innerHTML=myscore;
}
return true;
}
function dragDrop2(ev) {

var src = ev.dataTransfer.getData("Text");
if(!ev.target.contains(document.getElementById(src))){
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
var cal=0;
switch(src){
case "image1": cal = 20; break;
case "image2": cal = 30; break;
case "image3": cal = 40; break;
case "image4": cal = 50; break;
case "image5": cal = 60; break;
default: cal=10;
}
myscore=myscore+cal;
document.getElementById('Score').innerHTML=myscore;
}
return true;
}

</script>
0
James 1 sep. 2014 a las 00:42

Creo que debería permitir que cada div mantenga su propio valor calórico. Puede hacerlo con un atributo data- como:

<div id="image2" data-calories="30" draggable="true" ondragstart="return dragStart(event)" style="height: 50px;width: 50px;  background: url('http://www.farmfreshtoyou.com/media/wysiwyg/fresh_fruits/45.jpg');">
</div>

Cree una función que, una vez completada la operación de arrastre, vuelva a calcular todas las calorías de los divisores de imágenes secundarias. Algo como esto (código no probado):

var children = document.getElementById("boxF").children;
var calories = 0;

for (var i in children) {
    if (children[i].nodeName == "DIV") {
        calories += parseInt(children.getAttribute("data-calories"));
    }
}

//set the total equal to calories
0
jwatts1980 30 ago. 2014 a las 21:32