DragNDrop draft

UI/DragNDrop.js

@@ -0,0 +1,111 @@
+/**
+ * Drag and drop class.
+ *
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  2013 Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0 * @since      1.0.0
+ */
+(function (jsOMS)
+{
+    "use strict";
+
+    /** @namespace jsOMS.UI.DragNDrop*/
+    jsOMS.Autoloader.defineNamespace('jsOMS.UI.DragNDrop');
+
+    /**
+     * @constructor
+     *
+     * @since 1.0.0
+     * @author Dennis Eichhorn <d.eichhorn@oms.com>
+     */
+    jsOMS.UI.DragNDrop = function (app)
+    {
+        this.app    = app;
+        this.draggable  = {};
+    };
+
+    /**
+     * Unbind element
+     *
+     * @param {Object} element DOM element
+     *
+     * @since 1.0.0
+     * @author Dennis Eichhorn <d.eichhorn@oms.com>
+     */
+    jsOMS.UI.DragNDrop.prototype.unbind = function (element)
+    {
+    };
+
+    /**
+     * Bind element
+     *
+     * @param {Object} id DOM element
+     *
+     * @since 1.0.0
+     * @author Dennis Eichhorn <d.eichhorn@oms.com>
+     */
+    jsOMS.UI.DragNDrop.prototype.bind = function (id)
+    {
+         if (typeof id !== 'undefined') {
+            this.bindElement(id);
+        } else {
+            let elements = document.querySelectorAll('[draggable]'),
+                length = elements.length;
+
+            for (var i = 0; i < length; i++) {
+                if (typeof elements[i].getAttribute('id') !== 'undefined' && elements[i].getAttribute('id') !== null) {
+                    this.bindElement(elements[i].getAttribute('id'));
+                }
+            }
+        }
+    };
+
+    /**
+     * Bind DOM elment
+     *
+     * @param {Object} id DOM elment
+     *
+     * @since 1.0.0
+     * @author Dennis Eichhorn <d.eichhorn@oms.com>
+     */
+    jsOMS.UI.DragNDrop.prototype.bindElement = function (id)
+    {
+        let element = document.getElementById(id);
+        console.log(id);
+
+        element.addEventListener('dragstart', function(event) {
+            // todo: 
+            console.log('drag start');
+        });
+
+        element.addEventListener('dragenter', function(event) {
+            // todo: highlight
+            console.log('drag enter');
+        });
+
+        element.addEventListener('dragover', function(event) {
+            // todo: highlight if not already highlight
+            console.log('drag over');
+        });
+
+        element.addEventListener('dragleave', function(event) {
+            // todo: don't highlight
+            console.log('drag leave');
+        });
+
+        element.addEventListener('dragend', function(event) {
+            // todo: reset all changes
+            console.log('drag end');
+        });
+
+        //element.addEventListener('drag', function(event) {});
+        element.addEventListener('drop', function(event) {
+            // todo: add to now destination
+            // todo: remove from old destination
+            console.log('drag drop');
+        });
+    }
+
+}(window.jsOMS = window.jsOMS || {}));

UI/UIManager.js

@@ -29,7 +29,7 @@
         this.tabManager    = new jsOMS.UI.TabManager(this.app.responseManager);
         this.tableManager  = new jsOMS.UI.TableManager(this.app.responseManager);
         this.actionManager = new jsOMS.UI.ActionManager(this.app);
-
+        this.dragNDrop     = new jsOMS.UI.DragNDrop(this.app);
     };
 
     /**
@@ -49,6 +49,7 @@
             this.tabManager.bind();
             this.tableManager.bind();
             this.actionManager.bind();
+            this.dragNDrop.bind();
         } else {
             let tag = document.getElementById(id);
 
@@ -90,6 +91,11 @@
         return this.actionManager;
     };
 
+    jsOMS.UI.UIManager.prototype.getDragNDrop = function ()
+    {
+        return this.dragNDrop;
+    };
+
     /**
      * Get tab manager.
      *