added sort option for tables with data-columns

javascript/src/DragAndDrop.js

@@ -36,11 +36,23 @@ var QfqNS = QfqNS || {};
 
     n.DragAndDrop.prototype.buildDropArea = function(position, relatedId, otherPos) {
         var that = this;
+        var $dropArea = {};
+
+        if (this.$container.data("columns")) {
+            $dropArea = $("<tr />", {
+                class: "qfqDropTarget"
+            });
+            var $fluff = $("<td />", {
+                class: "qfqDropTarget",
+                colspan: this.$container.data("columns")
+            });
+            $fluff.appendTo($dropArea);
+        } else {
+            $dropArea = $("<div />", {
+                class: "qfqDropTarget"
+            });
+        }
 
-        var $dropArea = $("<div />", {
-            class: "qfqDropTarget",
-            draggable: true
-        });
         $dropArea.data("position", position);
         $dropArea.data("related", relatedId);
         $dropArea.data("other-pos", otherPos);
@@ -59,6 +71,7 @@ var QfqNS = QfqNS || {};
             e.originalEvent.preventDefault();
             that._moveObjectBefore(e, $dropArea);
         });
+
         return $dropArea;
     };
 
@@ -147,7 +160,6 @@ var QfqNS = QfqNS || {};
             this.$tempObject = {};
         }
         $("#" + this.draggedId).appendTo($("#" + event.currentTarget.id));
-        console.log("drop1");
     };
 
     n.DragAndDrop.prototype._buildOrderDropZones = function($object, e) {
@@ -164,6 +176,9 @@ var QfqNS = QfqNS || {};
     };
 
     n.DragAndDrop.prototype.removeDropAreas = function() {
+        if (this.$container.data("column")) {
+            this.$container.children(".qfqTempTable").remove();
+        }
         this.$container.children(".qfqDropTarget").remove();
     };
 
@@ -221,8 +236,6 @@ var QfqNS = QfqNS || {};
     };
 
     n.DragAndDrop.prototype._sendToAPI = function(object) {
-        console.log("Api request:" + this.api + "&key=" + this.key);
-        console.log(JSON.stringify(object));
         var that = this;
         $.getJSON(this.api, object, function(data) {
             that._successHandler(data);
@@ -242,7 +255,7 @@ var QfqNS = QfqNS || {};
             alert.show();
             console.error(data.message);
         } else {
-            console.log(data.message);
+            console.log("status:" + data.status + " message: " + data.message);
         }
     };
 

mockup/dragAndDrop.html

@@ -90,6 +90,36 @@
                     Numbero Siesta
                 </div>
             </div>
+
+            <h2>Table</h2>
+
+            <table class="table table-hover">
+                <tbody class="qfq-dnd-sort"
+                       data-dnd-api="typo3conf/ext/qfq/qfq/api/dragAndDrop.php?s=5b15109182850"
+                       data-columns="3">
+                <tr id="table-125" data-dnd-id="125">
+                    <td>125</td>
+                    <td>eins</td>
+                    <td>10</td>
+                </tr>
+                <tr id="table-126" data-dnd-id="126">
+                    <td>126</td>
+                    <td>zwei</td>
+                    <td>20</td>
+                </tr>
+                <tr id="table-128" data-dnd-id="128">
+                    <td>128</td>
+                    <td>vier</td>
+                    <td>30</td>
+                </tr>
+                <tr id="table-127" data-dnd-id="127">
+                    <td>127</td>
+                    <td>drei</td>
+                    <td>40</td>
+                </tr>
+                </tbody>
+            </table>
+
             <hr>
             <h2>Playing with baskets</h2>
             <div class="qfq-dnd" style="margin-top: 20px;"
@@ -136,19 +166,12 @@
 
 <script type="text/javascript">
     $(function () {
-        var qfqPage = new QfqNS.QfqPage({
-            tabsId: 'myTabs',
-            formId: 'myForm',
-            submitTo: 'api/' + $("#submitTo").val(),
-            deleteUrl: 'api/' + $("#deleteUrl").val(),
-            fileUploadTo: 'api/' + $("#uploadTo").val(),
-            fileDeleteUrl: 'api/' + $("#fileDeleteUrl").val()
-        });
 
-        QfqNS.Log.level = 0;
 
-        var dragi = new QfqNS.DragAndDrop($('.qfq-dnd-sort'));
-        dragi.makeSortable();
+        $('.qfq-dnd-sort').each(function() {
+            var dndObject = new QfqNS.DragAndDrop($('.qfq-dnd-sort'));
+            dndObject.makeSortable();
+        });
 
         var zoni = new QfqNS.DragAndDrop($('.qfq-dnd'));
         zoni.makeBasketCase();