Working drag and drop ordering

javascript/src/DragAndDrop.js

@@ -25,6 +25,7 @@ var QfqNS = QfqNS || {};
     n.DragAndDrop = function ($hook) {
         this.$container = $hook;
         this.eventEmitter = new EventEmitter();
+        this.draggedId = "";
     };
 
     n.DragAndDrop.prototype.on = n.EventEmitter.onMixin;
@@ -36,7 +37,6 @@ var QfqNS = QfqNS || {};
             draggable: true
         });
         $dropArea.on("dragenter", function(e) {
-            console.log("enter");
             e.preventDefault();
             $dropArea.addClass("qfqTargetDisplay");
         });
@@ -45,38 +45,63 @@ var QfqNS = QfqNS || {};
             e.originalEvent.dataTransfer.dropEffect = "move";
         });
         $dropArea.on("dragleave", function(e) {
-            e.preventDefault();
-            $dropArea.removeClass("qfqTargetDisplay");
+            $dropArea.remove();
         });
         $dropArea.on("drop", function(e) {
-            e.preventDefault();
-            console.log("Boom");
-            that.updateOrder(e, $dropArea);
+            e.originalEvent.preventDefault();
+            that._moveObjectBefore(e, $dropArea);
         });
         return $dropArea;
     };
 
+    n.DragAndDrop.prototype._buildOrderDropZones = function($object, e, isLast) {
+        this.removeDropAreas();
+
+        if ($object[0].id !== this.draggedId) {
+            var $dropArea = this.buildDropArea();
+            $object.before($dropArea);
+            if (isLast) {
+                var $lastDrop = this.buildDropArea();
+                $lastDrop.appendTo(this.$container);
+            }
+        }
+    };
+
+    n.DragAndDrop.prototype.removeDropAreas = function() {
+        this.$container.children(".qfqDropTarget").remove();
+    };
+
     n.DragAndDrop.prototype.buildOrderDrops = function() {
         var that = this;
-
+        var numberOfChildren = this.$container.children().length;
+        var count = 0;
+        var isLast = false;
         this.$container.children().each( function() {
+            count++;
+            console.log(numberOfChildren + " " + count);
+            if (numberOfChildren === count) {
+                isLast = true;
+            }
             var child = $(this);
             child.prop("draggable", true);
             child.on("dragstart", function(e) {
-                console.log(e);
-                e.originalEvent.dataTransfer.setData("text", child.id);
+                e.originalEvent.dataTransfer.setData("text", child[0].id);
+                that.draggedId = child[0].id;
                 e.originalEvent.dataTransfer.effectAllowed = "move";
             });
-            var $dropArea = that.buildDropArea();
-            child.before($dropArea);
+            child.on("dragenter", function(e) {
+                that._buildOrderDropZones($(this), e, isLast);
+            });
+            child.on("dragend", function() {
+                that.removeDropAreas();
+            });
         });
-        var $dropArea = this.buildDropArea();
-        $dropArea.appendTo(this.$container);
     };
 
-    n.DragAndDrop.prototype.updateOrder = function(e, $hook) {
-        console.log(e.dataTransfer.getData("text"));
-        console.log($hook);
+    n.DragAndDrop.prototype._moveObjectBefore = function(e, $hook) {
+        var id = e.originalEvent.dataTransfer.getData("text");
+        $hook.before(document.getElementById(id));
+        this.removeDropAreas();
     };
 
 

less/qfq-bs.css.less

@@ -415,21 +415,11 @@ i.@{spinner_class} {
 }
 
 .qfqDropTarget {
-  height: 5px;
-  transition: height 100ms;
+  height: 50px;
+  margin: 1px;
+  border: 1px dashed #ccc;
 }
 
 .qfqTargetDisplay {
-  height: 50px;
-  margin: 5px;
   border: 1px dashed #25adf1;
-}
-
-.subi {
-  height: 40px;
-  background-color: #5cb85c;
-  line-height: 40px;
-  color: white;
-  text-align: center;
-  margin: 15px;
 }
\ No newline at end of file

mockup/dragAndDrop.html

@@ -5,6 +5,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <style type="text/css">
+        .subi {
+            height: 40px;
+            background-color: #5cb85c;
+            line-height: 40px;
+            color: white;
+            text-align: center;
+        }
+    </style>
+
     <link rel="stylesheet" href="../css/bootstrap.min.css">
     <link rel="stylesheet" href="../css/bootstrap-theme.min.css">
     <link rel="stylesheet" href="../css/jqx.base.css">
@@ -39,8 +49,8 @@
 
 
     <div class="row">
-        <div class="col-md-2"></div>
-        <div class="col-md-8">
+        <div class="col-md-3"></div>
+        <div class="col-md-6">
 
             <div class="dragi">
                 <div class="subi" id="e1">
@@ -52,6 +62,15 @@
                 <div class="subi" id="e3">
                     Numbero Tre
                 </div>
+                <div class="subi" id="e4">
+                    Numbero Quattro
+                </div>
+                <div class="subi" id="e5">
+                    Numbero Cinge
+                </div>
+                <div class="subi" id="e6">
+                    Numbero Siesta
+                </div>
             </div>
         </div>
     </div>