DEV Community

Cover image for Drag and Drop Ui using html css and javascript https://www.instagram.com/webstreet_code/
Prince
Prince

Posted on

1

Drag and Drop Ui using html css and javascript https://www.instagram.com/webstreet_code/

Follow us on instagram: https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag & Drop Image Upload</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
            overflow: hidden;
        }

        h1 {
            display: block;
            color: white;
            font-size: 70px;
            font-weight: bolder;
            margin-bottom: 30px;
            text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        }

        .upload-box {
            width: 320px;
            height: 320px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.15);
            border: 2px dashed rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            backdrop-filter: blur(15px) saturate(200%);
            -webkit-backdrop-filter: blur(15px) saturate(200%);
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
        }

        .upload-box:hover {
            border-color: rgba(255, 255, 255, 0.4);
            background: rgba(255, 255, 255, 0.25);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
        }

        .upload-box.dragging {
            border-color: #00ff99;
        }

        .upload-box .icon {
            font-size: 70px;
            color: rgba(255, 255, 255, 0.7);
            transition: transform 0.2s;
        }

        .upload-box .icon:hover {
            transform: scale(1.2);
        }

        .upload-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px;
            display: none;
        }

        .upload-box img.visible {
            display: block;
        }
    </style>
</head>
<body>
    <h1>Drag & Drop</h1>
    <div class="upload-box" id="uploadBox">
        <div class="icon" id="uploadIcon">+</div>
        <img id="previewImage" src="" alt="Uploaded Image">
    </div>

    <script>
        const uploadBox = document.getElementById('uploadBox');
        const uploadIcon = document.getElementById('uploadIcon');
        const previewImage = document.getElementById('previewImage');

        // Drag over event
        uploadBox.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadBox.classList.add('dragging');
        });

        // Drag leave event
        uploadBox.addEventListener('dragleave', () => {
            uploadBox.classList.remove('dragging');
        });

        // Drop event
        uploadBox.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadBox.classList.remove('dragging');
            const file = e.dataTransfer.files[0];
            if (file && file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = function (event) {
                    previewImage.src = event.target.result;
                    previewImage.classList.add('visible');
                    uploadIcon.style.display = 'none';
                };
                reader.readAsDataURL(file);
            }
        });
    </script>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

Image of Datadog

Master Mobile Monitoring for iOS Apps

Monitor your app’s health with real-time insights into crash-free rates, start times, and more. Optimize performance and prevent user churn by addressing critical issues like app hangs, and ANRs. Learn how to keep your iOS app running smoothly across all devices by downloading this eBook.

Get The eBook

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up