mykanban2/assets/js/view/DropZone.js

import KanbanAPI from "../api/KanbanAPI.js";

export default class DropZone {
    static createDropZone() {
        const dropZone = document.createElement("div");
        dropZone.className = "kanban__dropzone";

        dropZone.addEventListener("dragover", event => {
            event.preventDefault();
            event.dataTransfer.dropEffect = "move";

            dropZone.classList.add(
                "kanban__dropzone--active"
            );
        });

        dropZone.addEventListener("dragleave", () => {
            dropZone.classList.remove(
                "kanban__dropzone--active"
            );
        });

        dropZone.addEventListener("drop", async event => {
            event.preventDefault();

            dropZone.classList.remove(
                "kanban__dropzone--active"
            );

            const itemId = Number(
                event.dataTransfer.getData("text/plain")
            );

            if (!Number.isInteger(itemId)) {
                return;
            }

            const columnElement =
                dropZone.closest(".kanban__column");

            if (!columnElement) {
                return;
            }

            const droppedItemElement =
                document.querySelector(
                    `.kanban__item[data-id="${itemId}"]`
                );

            if (!droppedItemElement) {
                return;
            }

            if (droppedItemElement.contains(dropZone)) {
                return;
            }

            const columnId =
                Number(columnElement.dataset.id);

            const dropZones = Array.from(
                columnElement.querySelectorAll(
                    ".kanban__dropzone"
                )
            );

            const position = dropZones.indexOf(dropZone);

            try {
                const updatedItem = await KanbanAPI.updateItem(
                    itemId,
                    {
                        columnId,
                        position
                    }
                );

                const parentItem =
                    dropZone.closest(".kanban__item");

                if (parentItem) {
                    parentItem.after(droppedItemElement);
                } else {
                    dropZone.after(droppedItemElement);
                }

                droppedItemElement.dataset.columnId =
                    String(updatedItem.columnId);
            } catch (error) {
                console.error(error);
                alert(error.message);
            }
        });

        return dropZone;
    }
}