0

Buen día chic@s, estoy haciendo un ejercicio de drag and drop sobre canecas de reciclaje. He puesto 3 canecas y 3 residuos, y logro que los residuos entren en cada caneca. El problema es que no sé de qué manera mostrar por pantalla los siguientes mensajes: "Residuo correcto" (en caso de que el residuo que se arrastre y pertenezca a esa caneca), "Residuo incorrecto" (en caso de que no pertenezca). introducir la descripción de la imagen aquí

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
<center><h1> Arrastrar y soltar </h1></center>

<center class="caneca">
    <div>
      <p> Caneca azul </p>
      <div class="img" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img src="imagenes/azul.png" width="100px" height="90px">
      </div>
    </div>
    
    <div>
      <p> Caneca verde </p>
          <div class="img" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
          <img src="imagenes/verde.png" width="100px" height="90px">
      </div>
    </div>
    
    <div>
      <p> Caneca gris </p>
      <div class="img" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img src="imagenes/gris.png" width="100px" height="90px">
      </div> 
     </div>
</center>
    <br /> <br />

<center><div id="x">
<img src="imagenes/botella.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="70">
</div>

<div id="y">
<img src="imagenes/carton.png" draggable="true" ondragstart="drag(event)" id="drag2" width="88" height="70">
</div>

<div id="z">
<img src="imagenes/aluminio.png" draggable="true" ondragstart="drag(event)" id="drag3" width="88" height="70">

4
  • Sería bueno que subieras tus imágenes a algún lado para que coloques los links en los atributos src y poder desarrollar de mejor manera el ejercicio. el 28 may. 2018 a las 15:20
  • Dame unos minutos amigo, ya lo haré. el 28 may. 2018 a las 15:25
  • No pude hacerlo, subí una imagen en una página llamada imgBB y luego puse el link en src y no detectó la imagen. el 28 may. 2018 a las 15:30
  • Bueno no hay problema, ya te hice un ejemplo, igual lo importante es que entiendas la lógica. el 28 may. 2018 a las 15:39

1 respuesta 1

1

Lo primero que se debe hacer el crear un atributo tanto para los drag como para los drop para categorizar los colores de las canecas, luego de esto capturamos ambos colores y comparamos, en caso de que el color del elemento drag sea igual al color del elemento drop entonces es por que el residuo pertenece a la caneca:

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
    
    var color = ev.target.getAttribute('color');
    ev.dataTransfer.setData("color", color);
}

function drop(ev) {
    ev.preventDefault();
    
    var color_drag = ev.dataTransfer.getData("color");
    var color_drop = ev.target.getAttribute('color');
    
    if(color_drag == color_drop){
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data)); 
      
      alert('Residuo correcto');
    }else{
      alert('Residuo incorrecto');
    }
}
.caneca > div{
  display: inline-block;
  vertical-align: top;
  padding: 0px 10px;
}
<center><h1> Arrastrar y soltar </h1></center>

<center class="caneca">
    <div>
      <p> Caneca azul </p>
      <div class="img" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img src="imagenes/azul.png" width="100px" height="90px" color="azul">
      </div>
    </div>
    
    <div>
      <p> Caneca verde </p>
          <div class="img" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
          <img src="imagenes/verde.png" width="100px" height="90px" color="verde">
      </div>
    </div>
    
    <div>
      <p> Caneca gris </p>
      <div class="img" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img src="imagenes/gris.png" width="100px" height="90px" color="gris">
      </div> 
     </div>
</center>
    <br /> <br />

<center><div id="x">
<img src="imagenes/botella.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="70" color="azul">
</div>

<div id="y">
<img src="imagenes/carton.png" draggable="true" ondragstart="drag(event)" id="drag2" width="88" height="70" color="verde">
</div>

<div id="z">
<img src="imagenes/aluminio.png" draggable="true" ondragstart="drag(event)" id="drag3" width="88" height="70" color="gris">

4
  • El único residuo admitido es la botella en la caneca azul, en las demás a pesar de ser el residuo correcto, me marca incorrecto el 28 may. 2018 a las 15:46
  • @JorgeHernández estás seguro que copiaste el código bien? en el snippet funciona el 28 may. 2018 a las 15:49
  • Lo había copiado mal, gracias por la ayuda en mis 2 publicaciones, te lo a agradezco de todo corazón, quizá ya debería saber hacer esto, pero hace 2 días empecé con javascript y lo de las funciones no me ha quedado claro, por el hecho de que donde estudio programación solo nos ponen diapositivas y buscar en google para defendernos. el 28 may. 2018 a las 15:55
  • @JorgeHernández no hay problema acá estamos para ayudar, si necesitas mas ayuda no dudes en preguntar, también puedes darte un pasón por el Chat de Stack Overflow en español allá me encontrarás a mi o a otras personas que estarán dispuestas a ayudar, ahora te invito a marcar la respuesta como aceptada si fue la solución a tu problema, saludos. el 28 may. 2018 a las 16:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.