JavaScript :: Aufgabe #14
1 Lösung
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.
Sie soll Drag an Drop verhindern.
Lösungen:
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>