Convert ondragenter example to a live sample

files/en-us/web/api/globaleventhandlers/ondragenter/index.html

@@ -28,89 +28,109 @@ <h3 id="Return_value">Return value</h3>
 <h2 id="Example">Example</h2>
 
 <p>This example demonstrates using the
-  {{domxref("GlobalEventHandlers.ondragenter","ondragenter")}} attribute handler to set an
+  {{domxref("GlobalEventHandlers.ondragenter","ondragenter")}} global event handler to set an
   element's {{event("dragenter")}} event handler.</p>
 
-<pre class="brush: js">&lt;!DOCTYPE html&gt;
-&lt;html lang=en&gt;
-&lt;title&gt;Examples of using the Drag and Drop Global Event Attribute&lt;/title&gt;
-&lt;meta content="width=device-width"&gt;
-&lt;style&gt;
-  div {
-    margin: 0em;
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">
+&lt;div&gt;
+  &lt;p id="source" draggable="true"&gt;
+     Select this element, drag it to the Drop Zone and then release the selection to move the element.&lt;/p&gt;
+&lt;/div&gt;
+&lt;div id="target"&gt;Drop Zone&lt;/div&gt;
+
+&lt;textarea readonly id="event-log"&gt;&lt;/textarea&gt;
+&lt;button id="reload"&gt;Reload&lt;/button&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div, #event-log {
+    margin: 1em;
+}
+#source, #target {
     padding: 2em;
-  }
-  #source {
-    color: blue;
-    border: 1px solid black;
-  }
-  #target {
     border: 1px solid black;
-  }
-&lt;/style&gt;
-&lt;/head&gt;
-&lt;script&gt;
+}
+#source {
+    color: blue;
+}
+#event-log {
+    width: 25rem;
+    height: 4rem;
+    margin-bottom: 0;
+    padding: .2rem;
+}
+</pre>
+
+<h3 id="JS">JavaScript</h3>
+
+<pre class="brush: js">const source = document.getElementById("source");
+const target = document.getElementById("target");
+const event_log = document.getElementById("event-log");
+
 function dragstart_handler(ev) {
- console.log("dragStart");
- // Change the source element's background color to signify drag has started
- ev.currentTarget.style.border = "dashed";
- ev.dataTransfer.setData("text", ev.target.id);
+  event_log.textContent += "dragStart\n";
+  // Change the source element's background color to signify drag has started
+  ev.currentTarget.style.border = "dashed";
+  ev.dataTransfer.setData("text", ev.target.id);
 }
 
 function dragover_handler(ev) {
- console.log("dragOver");
- // Change the target element's border to signify a drag over event
- // has occurred
- ev.currentTarget.style.background = "lightblue";
- ev.preventDefault();
+  event_log.textContent += "dragOver\n";
+  // Change the target element's border to signify a drag over event
+  // has occurred
+  ev.currentTarget.style.background = "lightblue";
+  ev.preventDefault();
 }
 
 function drop_handler(ev) {
- console.log("Drop");
- ev.preventDefault();
- var data = ev.dataTransfer.getData("text");
- ev.target.appendChild(document.getElementById(data));
+  event_log.textContent += "Drop\n";
+  ev.preventDefault();
+  const data = ev.dataTransfer.getData("text");
+  ev.target.appendChild(document.getElementById(data));
 }
 
 function dragenter_handler(ev) {
- console.log("dragEnter");
- // Change the source element's background color for enter events
- ev.currentTarget.style.background = "yellow";
+  event_log.textContent += "dragEnter\n";
+  // Change the source element's background color for enter events
+  ev.currentTarget.style.background = "yellow";
 }
 
 function dragleave_handler(ev) {
- console.log("dragLeave");
- // Change the source element's border back to white
- ev.currentTarget.style.background = "white";
+  event_log.textContent += "dragLeave\n";
+  // Change the source element's border back to white
+  ev.currentTarget.style.background = "white";
 }
 
 function dragend_handler(ev) {
- console.log("dragEnd");
- // Change the target element's background color to visually indicate
- // the drag ended.
- var el=document.getElementById("target");
- el.style.background = "pink";
+  event_log.textContent += "dragEnd\n";
+  // Change the target element's background color to visually indicate
+  // the drag ended.
+  target.style.background = "pink";
 }
 
-function init() {
- // Set handlers for the source's enter/leave/end/exit events
- var el=document.getElementById("source");
- el.ondragenter = dragenter_handler;
- el.ondragleave = dragleave_handler;
- el.ondragend = dragend_handler;
-}
-&lt;/script&gt;
-&lt;body onload="init();"&gt;
-&lt;h1&gt;Examples of &lt;code&gt;ondragenter&lt;/code&gt;, &lt;code&gt;ondragleave&lt;/code&gt;, &lt;code&gt;ondragend&lt;/code&gt;&lt;/h1&gt;
- &lt;div&gt;
-   &lt;p id="source" ondragstart="dragstart_handler(event);" draggable="true"&gt;
-     Select this element, drag it to the Drop Zone and then release the selection to move the element.&lt;/p&gt;
- &lt;/div&gt;
- &lt;div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"&gt;Drop Zone&lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;
+// Set handlers for the source's drag - start/enter/leave/end events
+source.ondragstart = dragstart_handler;
+source.ondragenter = dragenter_handler;
+source.ondragleave = dragleave_handler;
+source.ondragend = dragend_handler;
+
+// Set handlers for the target's drop and dragover events
+target.ondrop = drop_handler;
+target.ondragover = dragover_handler;
+
+// Set click event listener on button to reload the example
+const button = document.querySelector("#reload");
+button.addEventListener("click", () => {
+    document.location.reload();
+});
 </pre>
 
+<h3 id="Result">Result</h3>
+
+<p>{{ EmbedLiveSample('Example', '100', '450') }}</p>
+
 <h2 id="Specifications">Specifications</h2>
 
 {{Specifications}}