html+js/dragAndDrop.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop Image</title>
    <style>
        #dropZone {
            width: 300px;
            height: 300px;
            border: 2px dashed #555;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px auto;
            text-align: center;
        }

        .draggable {
            width: 100px;
            cursor: grab;
        }

        #dropZone img {
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>

<body>
    <h2 style="text-align: center;">Drag and Drop Example</h2>
    <p style="text-align: center;">Drag the image below into the box.</p>

    <div style="text-align: center;">
        <img src="https://via.placeholder.com/100" id="dragImage" class="draggable" draggable="true" alt="Draggable">
    </div>

    <div id="dropZone">Drop Here</div>

    <script>
        // Simplified drag and drop logic
        const dragImage = document.getElementById("dragImage");
        const dropZone = document.getElementById("dropZone");

        dragImage.ondragstart = (e) => e.dataTransfer.setData("id", e.target.id);

        dropZone.ondragover = (e) => e.preventDefault();

        dropZone.ondrop = (e) => {
            e.preventDefault();
            const draggedElement = document.getElementById(e.dataTransfer.getData("id"));
            if (draggedElement) {
                dropZone.innerHTML = ""; // Clear placeholder text
                dropZone.appendChild(draggedElement); // Move the dragged element
            }
        };
    </script>
</body>

</html>