i've been trying to code an assignment that displays a bunch of images from an array where you can drag one of them and drop it on the red container, i've managed to show the images but when i drag one image, it seems to drop the whole div, not just that one image. The code below shows the general idea, i promise the real one has way more stuff. I hope someone can help me:(
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>