我什么都不回，怎么修理？

当我删除带有图像的div时，我什么都没有得到，而在我尝试获取它的ID之后，我当然得到了null。但我如何从带有图像的div中获取信息并用它附加行？

'use strict';

let queuedImagesArray = [],
    queuedForm = document.querySelector('#queued-form'),
    queuedDiv = document.querySelector('.queued-div'),
    inputDiv = document.querySelector('.input-div'),
    input = document.querySelector('.input-div input');

const colors = ['#FF7F7F', '#FFBF7F', '#FFDF7F', '#BFFF7F', '#7FFF7F', '#7FBFFF', '#7F7FFF'],
    rows = document.querySelectorAll('.content__row'),
    cards = document.querySelectorAll('.content__card'),
    addCard = document.getElementById('addCard');

// Queued Images

const onDragStart = (event) => {
    console.log('Dragging');
    event.dataTransfer.setData('id', event.target.id);

    setTimeout(() => {
        event.target.style.visibility = 'hidden';
    }, 100);
};

const onDragEnd = (event) => {
    console.log('Ended dragging');
    event.target.style.visibility = 'visible';
};

const displayQueuedImages = () => {
    let images = '';
    queuedImagesArray.forEach((image, index) => {
        images += `
        <div class="image" draggable="true" id="${(Date.now() + '').slice(-10) + index}">
            <img width='100' height='100' style="pointerEvents:none;" id="${index}" ondragstart="onDragStart" ondragend="onDragEnd"
            src="${URL.createObjectURL(image)}" alt="image" />
            <span style="color:black;font-size:2rem" onclick="deleteQueuedImage(${index})">&times;</span>
        </div>
        `;
    });
    queuedDiv.innerHTML = images;
};

const deleteQueuedImage = (index) => {
    queuedImagesArray.splice(index, 1);
    displayQueuedImages();
};

input.addEventListener('change', () => {
    const files = input.files;
    for (let i = 0; i < files.length; i++) {
        queuedImagesArray.push(files[i]);
    }
    queuedForm.reset();
    displayQueuedImages();
});

inputDiv.addEventListener('drop', (e) => {
    e.preventDefault();
    const files = e.dataTransfer.files;
    for (let i = 0; i < files.length; i++) {
        if (!files[i].type.match('image')) return;
        if (queuedImagesArray.every((image) => image.name !== files[i].name))
            queuedImagesArray.push(files[i]);
    }
    displayQueuedImages();
});

const onDrag = (event) => {
    event.preventDefault();
};
// Problem here 
const onDrop = (event) => {
    event.preventDefault();
    const draggedCardId = event.dataTransfer.getData('id'); // nothing
    const draggedCard = document.getElementById(draggedCardId); // null
    event.target.appendChild(draggedCard);
};

rows.forEach((row, index) => {
    const label = row.querySelector('.content__label');
    label.style.backgroundColor = colors[index];
    row.ondragover = onDrag;
    row.ondrop = onDrop;
});

<main>
            <section class="section" id="section--1">
                <div class="section__title">
                    <h2 class="section__description">Tier list app</h2>
                    <h3 class="section__text">Start dragging to move cards</h3>
                </div>
                <div class="content" id="content">
                    <div class="content__row">
                        <div class="content__label">S (The best)</div>
                      
                    </div>
                    <div class="content__row">
                        <div class="content__label">A (Great)</div>
                    </div>
                    <div class="content__row">
                        <div class="content__label">B (Good)</div>
                    </div>
                    <div class="content__row">
                        <div class="content__label">C (Mediocre)</div>
                    </div>
                    <div class="content__row">
                        <div class="content__label">D (Bad)</div>
                    </div>
                    <div class="content__row">
                        <div class="content__label">E (Horrible)</div>
                    </div>
                    <!-- <div class="content__row">
                        <div class="content__label">F (Worst^_^)</div>
                    </div>  -->
                </div>
            </section>

            <form id="queued-form">
                <div class="queued-div"></div>
            </form>

            <div class="input-div">
                <p>Drag & drop images here or <span class="browse">Browse</span></p>
                <input
                    type="file"
                    class="file"
                    multiple="multiple"
                    accept="image/png, image/jpeg, image/jpg"
                />
            </div>
        </main>

当我一个一个地添加图像时，一切都很好，但当我将按钮更改为输入区域时，我无法从新图像中获得任何信息