MaxInterview - on drop 2c drag 2c dragover event

showing results for - "on drop 2c drag 2c dragover event"
24 Apr 2017
1<!DOCTYPE html>
2<html lang=en>
3<title>Examples of using the ondrag Global Event Attribute</title>
4<meta content="width=device-width">
5<style>
6  div {
7    margin: 0em;
8    padding: 2em;
9  }
10  #source {
11    color: blue;
12    border: 1px solid black;
13  }
14  #target {
15    border: 1px solid black;
16  }
17</style>
18</head>
19<script>
20function drag_handler(ev) {
21 console.log("Drag");
22}
23
24function dragstart_handler(ev) {
25 console.log("dragStart");
26 ev.dataTransfer.setData("text", ev.target.id);
27}
28
29function drop_handler(ev) {
30 console.log("Drop");
31 ev.currentTarget.style.background = "lightyellow";
32
33 ev.preventDefault();
34 var data = ev.dataTransfer.getData("text");
35 ev.target.appendChild(document.getElementById(data));
36}
37
38function dragover_handler(ev) {
39 console.log("dragOver");
40 ev.preventDefault();
41}
42</script>
43<body>
44<h1>Examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1>
45 <div class="source">
46   <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true">
47     Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
48 </div>
49 <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
50</body>
51</html>
52
source