JavaScript :: Aufgabe #14

1 Lösung Lösung öffentlich
#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
Votes: 0 Admin: 0

Lösungen:

#1
vote_ok
von Smiterix (110 Punkte) - 08.04.2020 um 00:22 Uhr
Quellcode ausblenden 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>
Bitte melden Sie sich an um eine Kommentar zu schreiben.
Kommentar schreiben
Admin: 0