Я ничего не возвращаю ondrop, как это исправить?

Когда я удаляю свой div с изображением внутри, я ничего не получаю, и после того, как я пытаюсь получить его идентификатор, я, конечно, получаю ноль. Но как я могу получить информацию из div с изображением и добавить к нему строку? Код здесь или проверьте codepen: https://codepen.io/13reathcode/pen/NWBmZpb

'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.info('Dragging');
    event.dataTransfer.setData('id', event.target.id);

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

const onDragEnd = (event) => {
    console.info('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>
* {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    font-size: 62.5%; // 10px = 1rem
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color: #555;
    line-height: 1.5;
}

.input-div {
    width: 70%;
    height: 200px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 5rem auto;
    border: 2px dotted black;
    background-color: white;
    position: relative;

    .browse {
        color: black;
        font-weight: bold;
    }
}

.file {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.queued-div {
    width: 70%;
    min-height: 200px;
    display: flex;
    margin: 5rem auto;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
    position: relative;
    border-radius: 5px;
    border: 2px dotted black;
    background-color: white;

    .image {
        height: 10rem;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        position: relative;

        &:nth-child(4n) {
            margin-right: 0;
        }

        img {
            height: 100%;
            width: 100%;
        }

        span {
            position: absolute;
            top: -4px;
            right: 4px;
            cursor: pointer;
            font-size: 22px;
            color: white;

            &:hover {
                opacity: 0.8;
            }
        }
    }
}

@mixin center {
    display: flex;
    justify-content: center;
    align-items: center;
}

// SECTIONS

.section {
    padding: 1.8rem 3rem;

    &__title {
        max-width: 80rem;
        margin: 0 auto 2rem auto;
        text-align: center;
        text-transform: uppercase;
    }

    &__description {
        color: lightgreen;
        font-size: 1.8rem;
    }

    &__text {
        font-size: 2.5rem;
    }

    &__button {
        font-size: 2rem;
        text-transform: uppercase;
        text-decoration: none;
        padding: 1rem 2rem;
        display: inline-block;
        border-radius: 3rem;
        position: relative;
        background-color: lightgreen;
        color: #fff;

        border: none;
        cursor: pointer;
    }
}

// CONTENT
.content {
    width: 70vw;
    min-height: 10vh;
    padding: 0rem;
    box-sizing: content-box;
    border: 3px solid #000;

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin: 0 auto;

    &__row {
        width: 100%;
        box-sizing: content-box;
        flex-wrap: wrap;
        height: 8.5rem;
        background-color: #1a1a17;
        display: flex;

        &:not(:last-child) {
            border-bottom: 2px solid #000;
        }
    }

    &__label {
        font-size: 2rem;
        font-weight: 400;
        height: 100%;
        width: 15rem;
        background-color: #555;
        color: #333;
        border-right: 3px solid #000;

        @include center;
    }

    &__card {
        @include center;

        &:focus,
        &:active {
            cursor: pointer;
        }
    }
}

Когда я добавлял изображения одно за другим, все было в порядке, но когда я сменил кнопку на зону ввода, я ничего не смог получить из новых изображений.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
55
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Существует небольшая проблема в том, как вы создаете свои элементы img: обработчики событий ondragstart и ondragend не назначаются должным образом.

В настоящее время ваши элементы img выглядят примерно так:

<img id = "0" ondragstart = "onDragStart" ondragend = "onDragEnd" src=... />

Однако установка ondragstart равным onDragStart на самом деле не вызывает функцию при запуске события. То же самое с ondragend и onDragEnd. Для этого вам нужно вызвать функции с помощью onDragStart(event) и onDragEnd(event).

Это связано с тем, что каждый атрибут обработчика событий HTML неявно заключен в:

(event) => { /** the attribute value */ }

Другими словами, в настоящее время ваши обработчики эквивалентны:

(event) => { onDragStart }
// and
(event) => { onDragEnd }

вместо

(event) => { onDragStart(event) }
// and
(event) => { onDragEnd(event) }

который дается

<img id = "0" ondragstart = "onDragStart(event)" ondragend = "onDragEnd(event)" src=... />

Таким образом, исправление состоит в том, чтобы просто исправить код генерации img на:

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

Другие вопросы по теме