JQuery Fiddle #43 - Drag and Drop API

Simple fiddle exploring the features of the HTML Drag and Drop API.

by brady houseknecht

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css">
<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script>
  document.write('<a id="githubLink" href="https://github.com/bradyhouse/house/tree/master/fiddles/jquery/fiddle-0043-DragAndDropApi"' +
    '><img style="z-index: 1000; position: absolute; top: 0; right: 0; border: 0;" ' +
    'src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" ' +
    'alt="Fork me on GitHub"><\/a>');

</script>
<div id="fiddleHook"></div>

CSS

.anti-drop-zone {
  position: absolute;
  bottom: 50%;
  width: 100%;
  background-color: red;
  left: 0%;
  color: white;
  vertical-align: top;
  padding: 1%;
}

.drop-zone {
  position: absolute;
  bottom: 10%;
  width: 100%;
  background-color: black;
  color: white;
  vertical-align: top;
  padding: 1%;
}

.drag-zone {
  position: absolute;
  bottom: 10%;
  width: 100%;
  background-color: black;
  color: white;
  vertical-align: top;
  padding: 1%;
}

.infinite-slide-left {
  animation: 15s infinite;
  -moz-animation-name: slide-left;
  -webkit-animation-name: slide-left;
}

@-moz-keyframes slide-left {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: -100%;
  }
}

@-webkit-keyframes slide-left {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: -100%;
  }
}

JavaScript

(function (app, $, undefined) {
  "use strict";

  app.metadata = {
    fiddleHeader: 'HTML Drag And Drop API',
    urls: {
      github: 'https://github.com/bradyhouse/house/tree/master/fiddles/jquery/fiddle-0043-DragAndDropApi'
    },
    consoleTag: 'H O U S E ~ f i d d l e s'
  };

  app.allowDrop = true;

  app.generateGuid = function () {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
      var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
  };

  app.onDragStart = function (event) {
    event.dataTransfer.setData('text/plain', event.target.id);
    event.dataTransfer.dropEffect = 'none';
    app.allowDrop = true;
  };

  app.onDragOver = function (event) {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'move'
  };

  app.onAntiDrop = function (event) {
    app.allowDrop = false;
    event.preventDefault();
    event.dataTransfer.clearData();
    return false;
  };

  app.onAntiDragOver = function (event) {
    app.allowDrop = false;
    event.preventDefault();
    event.dataTransfer.clearData();
    event.returnValue = null;
    return false;
  };

  app.onDrop = function (event) {
    if (app.allowDrop) {
      event.preventDefault();
      let data = event.dataTransfer.getData('text');
      event.target.appendChild(document.getElementById(data));
      app.view.createDraggableLink(app.hook);
    }
  };

  app.view = app.view || {
      createDraggableLink: function (hookEl) {
        let el = window.document.createElement('div');
        el.setAttribute('id', app.generateGuid());
        el.setAttribute('draggable', 'true');
        el.setAttribute('ondragstart', 'app.onDragStart(event)');
        el.setAttribute('style', 'background-color: black; color: white; width: 100%;');
        el.innerHTML = 'drag to drop - ' + el.id + '<br/>';
        hookEl.appendChild(el);
      },
      createAntiDropZone: function (hookEl) {
        let elEmpty =...