1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <title>Drag & Drop</title>
6</head>
7
8<body>
9 <!-- Drag & Drop -->
10 <div id="div1" ondrop="drop(event)" ondragover="checkDrop(event)" class="dropField">
11 <h1>Drag & Drop</h1>
12 </div>
13 <!-- Switch -->
14 <div class="switchContainer">
15 <label class="switch">
16 <input id="switch" type="checkbox" onclick="switchText(event)">
17 <span class="slider round"></span>
18 </label>
19 <p id="switchText">Disallowed</p>
20 </div>
21
22 <script>
23 function switchText(event) {
24 let text = "Disallowed";
25 if (event.target.checked) {
26 text = "Allowed";
27 }
28 document.getElementById('switchText').innerHTML = text;
29 }
30
31 function checkDrop(event) {
32 if (document.getElementById('switch').checked) {
33 event.preventDefault();
34 } else {
35 event.stopPropagation();
36 }
37 }
38
39 function drop(event) {
40 event.preventDefault();
41 console.log(event)
42 //Whatever you want to do after Drop
43 }
44 </script>
45
46 <style>
47 .dropField {
48 width: 100%;
49 height: 10em;
50 text-align: center;
51 border: 3px black solid;
52 }
53 /* Switch */
54
55 .switchContainer {
56 margin-top: 1em;
57 text-align: center;
58 }
59
60 #switchText {
61 font-size: 20px;
62 }
63
64 .switch {
65 position: relative;
66 display: inline-block;
67 width: 60px;
68 height: 34px;
69 }
70 /* Hide default HTML checkbox */
71
72 .switch input {
73 opacity: 0;
74 width: 0;
75 height: 0;
76 }
77 /* The slider */
78
79 .slider {
80 position: absolute;
81 cursor: pointer;
82 top: 0;
83 left: 0;
84 right: 0;
85 bottom: 0;
86 background-color: #ccc;
87 -webkit-transition: .4s;
88 transition: .4s;
89 }
90
91 .slider:before {
92 position: absolute;
93 content: "";
94 height: 26px;
95 width: 26px;
96 left: 4px;
97 bottom: 4px;
98 background-color: white;
99 -webkit-transition: .4s;
100 transition: .4s;
101 }
102
103 input:checked+.slider {
104 background-color: #2196F3;
105 }
106
107 input:focus+.slider {
108 box-shadow: 0 0 1px #2196F3;
109 }
110
111 input:checked+.slider:before {
112 -webkit-transform: translateX(26px);
113 -ms-transform: translateX(26px);
114 transform: translateX(26px);
115 }
116 /* Rounded sliders */
117
118 .slider.round {
119 border-radius: 34px;
120 }
121
122 .slider.round:before {
123 border-radius: 50%;
124 }
125 </style>
126</body>
127
128</html>
129