Drag and Drop Sperre - JavaScript - Lösung #1TRAIN your programmer

JavaScript :: Aufgabe #14 :: Lösung #1

1 Lösung

#14

Drag and Drop Sperre - JavaScript

Anfänger - JavaScript von Programmer21 - 08.05.2019 um 20:38 Uhr

Eine Drag and Drop Sperre soll in JavaScript Programmiert werden.
Sie soll Drag an Drop verhindern.

Bitte melden Sie sich an um zur Aufgabenbeschreibung eine Frage zu stellen.

Frage stellen

Bitte melden Sie sich an um eine Lösung einzureichen.

Lösung einreichen

von Smiterix (110 Punkte) - 08.04.2020 um 00:22 Uhr

HTML-Code


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

<head>
    <title>Drag & Drop</title>
</head>

<body>
    <!-- Drag & Drop -->
    <div id="div1" ondrop="drop(event)" ondragover="checkDrop(event)" class="dropField">
        <h1>Drag & Drop</h1>
    </div>
    <!-- Switch -->
    <div class="switchContainer">
        <label class="switch">
            <input id="switch" type="checkbox" onclick="switchText(event)">
            <span class="slider round"></span>
        </label>
        <p id="switchText">Disallowed</p>
    </div>

    <script>
        function switchText(event) {
            let text = "Disallowed";
            if (event.target.checked) {
                text = "Allowed";
            }
            document.getElementById('switchText').innerHTML = text;
        }

        function checkDrop(event) {
            if (document.getElementById('switch').checked) {
                event.preventDefault();
            } else {
                event.stopPropagation();
            }
        }

        function drop(event) {
            event.preventDefault();
            console.log(event)
                //Whatever you want to do after Drop
        }
    </script>

    <style>
        .dropField {
            width: 100%;
            height: 10em;
            text-align: center;
            border: 3px black solid;
        }
        /* Switch */
        
        .switchContainer {
            margin-top: 1em;
            text-align: center;
        }
        
        #switchText {
            font-size: 20px;
        }
        
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
        /* Hide default HTML checkbox */
        
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        /* The slider */
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }
        
        input:checked+.slider {
            background-color: #2196F3;
        }
        
        input:focus+.slider {
            box-shadow: 0 0 1px #2196F3;
        }
        
        input:checked+.slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }
        /* Rounded sliders */
        
        .slider.round {
            border-radius: 34px;
        }
        
        .slider.round:before {
            border-radius: 50%;
        }
    </style>
</body>

</html>