ondragstart: convert static example to live example (#15318)

mdn · Apr 29, 2022 · 49a92b9 · 49a92b9
1 parent cf6a604
commit 49a92b9
Showing 1 changed file with 100 additions and 46 deletions.
diff --git a/files/en-us/web/api/globaleventhandlers/ondragstart/index.md b/files/en-us/web/api/globaleventhandlers/ondragstart/index.md
@@ -16,74 +16,128 @@ A {{domxref("GlobalEventHandlers","global event handler")}} for the
 ## Syntax
 
 ```js
-var dragstartHandler = targetElement.ondragstart;
+target.ondragstart = functionRef;
 ```
 
-### Return value
+### Value
 
-- `dragstartHandler`
-  - : The _dragstart_ event handler for element `targetElement`.
+- `functionRef`
+  - : The _dragstart_ event handler for element `target`.
 
 ## Example
 
 This example demonstrates using the
-{{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} attribute handler to set an
-element's {{event("dragstart")}} event handler.
+{{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} global event handler to set an
+element's `dragstart` event handler.
 
-```js
-<!DOCTYPE html>
-<html lang=en>
-<title>Examples of using the ondrag Global Event Attribute</title>
-<meta content="width=device-width">
-<style>
-  div {
-    margin: 0em;
+### HTML
+
+```html
+<div>
+  <p id="source" draggable="true">
+     Select this element, drag it to the Drop Zone and then release the selection to move the element.
+  </p>
+</div>
+<div id="target">Drop Zone</div>
+
+<textarea readonly id="event-log"></textarea>
+<button id="reload">Reload</button>
+```
+
+### CSS
+
+```css
+div, #event-log {
+    margin: 1em;
+}
+
+#source, #target {
     padding: 2em;
-  }
-  #source {
-    color: blue;
-    border: 1px solid black;
-  }
-  #target {
     border: 1px solid black;
-  }
-</style>
-</head>
-<script>
-function drag_handler(ev) {
- console.log("Drag");
 }
 
+#source {
+    color: blue;
+}
+
+#event-log {
+    width: 25rem;
+    height: 8rem;
+    margin-bottom: 0;
+    padding: .2rem;
+}
+```
+
+### JavaScript
+
+```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");
- 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.background = "lightgreen";
+    ev.dataTransfer.setData("text", ev.target.id);
+}
+
+function dragover_handler(ev) {
+    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.currentTarget.style.background = "lightyellow";
+    event_log.textContent += "Dropped\n";
+    ev.preventDefault();
+    const data = ev.dataTransfer.getData("text");
+    ev.target.appendChild(document.getElementById(data));
+    target.style.background = "pink";
+}
 
- ev.preventDefault();
- var data = ev.dataTransfer.getData("text");
- ev.target.appendChild(document.getElementById(data));
+function dragenter_handler(ev) {
+    event_log.textContent += "dragEnter\n";
+    // Change the source element's background color for enter events
+    ev.currentTarget.style.background = "yellow";
 }
 
-function dragover_handler(ev) {
- console.log("dragOver");
- ev.preventDefault();
+function dragleave_handler(ev) {
+    event_log.textContent += "dragLeave\n";
+    // Change the source element's border back to white
+    ev.currentTarget.style.background = "white";
+}
+
+function dragend_handler(ev) {
+    event_log.textContent += "dragEnd\n";
+    // Change the target element's background color to visually indicate
+    // the drag ended.
+    ev.currentTarget.style.background = "pink";
 }
-</script>
-<body>
-<h1>Examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1>
- <div>
-   <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true">
-     Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
- </div>
- <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
-</body>
-</html>
+
+// Set handlers for the source's drag - start/enter/leave/end events
+source.ondragstart = dragstart_handler;
+source.ondragend = dragend_handler;
+
+// Set handlers for the target's drop and dragover events
+target.ondragleave = dragleave_handler;
+target.ondragenter = dragenter_handler;
+target.ondragover = dragover_handler;
+target.ondrop = drop_handler;
+
+// Set click event listener on button to reload the example
+const button = document.getElementById("reload");
+button.addEventListener("click", () => {
+    document.location.reload();
+});
 ```
 
+### Result
+
+{{ EmbedLiveSample('Example', '100', '450') }}
+
 ## Specifications
 
 {{Specifications}}