Drag and Drop Using Native DOM Methods

Drag and Drop

Demo of drag and drop using only native DOM methods.

Usage: Grab one of the randomly generated elements and drag it around the four droppable zones. When when the drag is complete, the item will be appended to the "destination" zone.

The demo shows simple uses of:

Drag and Drop API (https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)
Generators (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*)
Immediately invoked function expressions (https://developer.mozilla.org/en-US/docs/Glossary/Function)
Closures (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)

xxxxxxxxxx
 
<!doctype html>
​
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Drag and Drop Demo</title>
  <link rel="stylesheet" href="styles.css">
  <script src="index.js" defer></script>
</head>
<body>
  <div class="row">
    <div id="zone-0" class="zone"></div>
    <div id="zone-1" class="zone"></div>
  </div>
  <div class="row">
    <div id="zone-2" class="zone"></div>
    <div id="zone-3" class="zone"></div>
  </div>
</body>
</html>
​
    