Estoy trabajando en un servicio web con HTML, CSS y JavaScript. Tengo una lista en un cierto con tenedor en donde cada elemento de la lista es una imagen. En cada una de estas imágenes se puede hacer clic.
La idea entonces es que se pueda hacer clic en cada imagen y pasarlas a un contenedor nuevo.
Codigo HTML con la lista de imagenes:
<ul>
<li id="primerImagen">
<input type="image" src="pictures/primerImagen.png">
</li>
<li id="segundaImagen">
<input type="image" src="pictures/segundaImagen.png">
</li>
<li id="tercerImagen">
<input type="image" src="pictures/tercerImagen.png">
</li>
</ul>
De la siguiente manera logro que las imágenes aparezcan en un box nuevo
var contenedor = document.getElementById("tableBox2");
document.querySelectorAll('input[type="image"]').forEach(function(image) {
var imagenes = document.createElement("image");
image.addEventListener("click", function(e) {
contenedor.appendChild(this);
});
});
El problema es que no estoy logrando que las imágenes pasen de un lugar a otro sin eliminarlas del a lista original. Alguna sugerencia de como lograr esto?