He estado tratando de codificar una tarea que muestra un montón de imágenes de una matriz donde puedes arrastrar una de ellas y soltarla en el contenedor rojo, he logrado mostrar las imágenes pero cuando arrastro una imagen, parece para eliminar todo el div, no solo esa imagen. El siguiente código muestra la idea general, prometo que el real tiene muchas más cosas. Espero que alguien pueda ayudarme:(
var images = [ 'https://i.bandori.party/u/i/31Mashiro-Kurata-5yrKez.png', 'https://i.bandori.party/u/i/40CHU²-N46MbU.png']; function buildImages() { // the container var container = document.getElementById('content'); for (var i = 0; i < images.length; i++) { // create the image element var imageElement = document.createElement('img'); imageElement.setAttribute('src', images[i]); // append the element to the container container.appendChild(imageElement); } } // run the script here. buildImages(); 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('content')); } #outfit-container-top{ display: flex; position: absolute; justify-content: flex-start; width: 203px; height: 305px; top:100px; left: 350px; border-radius: 10px; background-color: #ff0000; } <div id="content" draggable="true" ondragstart="drag(event)"></div> <div id="outfit-container-top" ondrop="drop(event)" ondragover="allowDrop(event)"></div>