demo shell (ng2)

basic angular2-based demo shell

demo-shell-ng2/app/js/dropZone.js

@@ -0,0 +1,60 @@
+function dropZone(opts) {
+  var options = opts || {},
+      element = opts.element || document.createElement('div'),
+      minHeight = opts.minHeight || '20px',
+      maxHeight = opts.maxHeight || '100px';
+  
+  element.className = 'drop-zone';
+  element.style.height = minHeight;
+  element.textAlign = 'center';
+  
+  // Event listener for when the dragged element enters the drop zone.
+  element.addEventListener('dragenter', function (e) {
+    this.classList.add('over');
+    this.style.height = maxHeight;
+  });
+  
+  // Event listener for when the dragged element is over the drop zone.
+  element.addEventListener('dragover', function (e) {
+    if (e.preventDefault) {
+      e.preventDefault();
+    }
+    e.dataTransfer.dropEffect = 'move';
+    return false;
+  });
+  
+  // Event listener for when the dragged element leaves the drop zone.
+  element.addEventListener('dragleave', function (e) {
+    this.classList.remove('over');
+    this.style.height = minHeight;
+  });
+  
+  // Event listener for when the dragged element dropped in the drop zone.
+  element.addEventListener('drop', function (e) {
+    if (e.preventDefault) e.preventDefault();
+    if (e.stopPropagation) e.stopPropagation();
+    
+    this.classList.remove('over');
+    this.style.height = minHeight;
+    
+    if (typeof opts.onDrop === 'function') {
+      var dropData = e.dataTransfer.getData('text');
+      var payload = {};
+      if (dropData) {
+        try {
+          payload = JSON.parse(dropData);
+        } catch (err) {
+          payload = {};
+        }
+      } 
+      
+      opts.onDrop(this, payload);
+    }
+    
+    return false;
+  });
+  
+  return {
+    "element": element
+  };
+}