From 05da0cdf7cba8ba95c6f4d056dcf4833b6f149aa Mon Sep 17 00:00:00 2001
From: Rolux <rolux@Rolux.local>
Date: Sat, 3 Jul 2010 13:31:25 +0200
Subject: [PATCH] draggable columns for text list

---
 build/css/ox.ui.css | 10 +++++
 build/js/ox.ui.js   | 95 ++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 96 insertions(+), 9 deletions(-)

diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css
index 7226c4a..2d41ae1 100644
--- a/build/css/ox.ui.css
+++ b/build/css/ox.ui.css
@@ -875,3 +875,13 @@ Requests
     width: 12px;
     height: 12px;
 }
+
+/*
+================================================================================
+Drag & Drop
+================================================================================
+*/
+
+.OxDrag {
+    cursor: move;
+}
\ No newline at end of file
diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js
index 4cdc268..193a47b 100644
--- a/build/js/ox.ui.js
+++ b/build/js/ox.ui.js
@@ -2968,6 +2968,7 @@ requires
         });
 
         $.extend(self, {
+            columnPositions: [],
             columnWidths: [],
             itemHeight: 16,
             page: 0,
@@ -2994,19 +2995,30 @@ requires
         that.$head.$content.addClass("OxTitles");
         that.$titles = [];
         $.each(self.visibleColumns, function(i, v) {
-            var $order, $resize, $left, $center, $right;
+            var $order, $resize, $left, $center, $right, timeout = 0;
             self.columnWidths[i] = v.width;
             that.$titles[i] = $("<div>")
-                .addClass("OxTitle")
+                .addClass("OxTitle OxColumn" + Ox.toTitleCase(v.id))
                 .css({
                     width: (v.width - 9) + "px",
                     textAlign: v.align
                 })
                 .html(v.title)
-                .click(function() {
-                    clickColumn(v.id)
+                .mousedown(function(e) {
+                    timeout = setTimeout(function() {
+                        dragColumn(v.id, e);
+                        timeout = 0;
+                    }, 250);
+                })
+                .mouseup(function() {
+                    if (timeout) {
+                        clearTimeout(timeout);
+                        timeout = 0;
+                        clickColumn(v.id);
+                    }
                 })
                 .appendTo(that.$head.$content.$element);
+            self.columnPositions[i] = Ox.sum(self.columnWidths) - self.columnWidths[i] / 2;
             $order = $("<div>")
                 .addClass("OxOrder")
                 .html(oxui.symbols["triangle_" + (
@@ -3019,12 +3031,12 @@ requires
             $resize = $("<div>")
                 .addClass("OxResize")
                 .mousedown(function(e) {
-                    var initialWidth = self.columnWidths[i],
-                        initialX = e.clientX;
+                    var startWidth = self.columnWidths[i],
+                        startX = e.clientX;
                     $window.mousemove(function(e) {
                         var x = e.clientX,
                             width = Ox.limit(
-                                initialWidth - initialX + x,
+                                startWidth - startX + x,
                                 self.options.columnWidth[0],
                                 self.options.columnWidth[1]
                             );
@@ -3090,6 +3102,7 @@ requires
         }
 
         function clickColumn(id) {
+            Ox.print("clickColumn", id);
             var i = getColumnIndexById(id),
                 isSelected = self.options.sort[0].key == self.options.columns[i].id;
             that.sort(
@@ -3118,6 +3131,56 @@ requires
             return $item;
         }
 
+        function dragColumn(id, e) {
+            var startX = e.clientX,
+                startPos = getColumnPositionById(id),
+                pos = startPos,
+                stopPos = startPos,
+                positions = $.map(self.visibleColumns, function(v, i) {
+                    return self.columnPositions[i] - self.columnPositions[startPos]
+                });
+            that.$titles[startPos].addClass("OxDrag").css({ // fixme: why does the class not work?
+                cursor: "move"
+            });
+            Ox.print("positions", positions)
+            $window.mousemove(function(e) {
+                var d = e.clientX - startX;
+                $.each(positions, function(i, v) {
+                    if (d < 0 && d < v) {
+                        stopPos = i;
+                        return false;
+                    } else if (d > 0 && d > v) {
+                        stopPos = i;
+                    }
+                });
+                if (stopPos != pos) {
+                    pos = stopPos;
+                    moveColumn(id, pos);
+                }
+            });
+            $window.mouseup(function() {
+                dropColumn(id, pos);
+                $window.unbind("mousemove");
+                $window.unbind("mouseup");
+            });
+        }
+
+        function dropColumn(id, pos) {
+            Ox.print("dropColumn", id, pos)
+            var startPos = getColumnPositionById(id),
+                stopPos = pos,
+                $title = that.$titles.splice(startPos, 1)[0],
+                column = self.visibleColumns.splice(startPos, 1)[0],
+                width = self.columnWidths.splice(startPos, 1)[0];
+            that.$titles.splice(stopPos, 0, $title);
+            self.visibleColumns.splice(stopPos, 0, column);
+            self.columnWidths.splice(stopPos, 0, width);
+            Ox.print("s.vC", self.visibleColumns)
+            that.$titles[stopPos].removeClass("OxDrag").css({
+                cursor: "pointer"
+            });
+        }
+
         function getColumnIndexById(id) {
             var pos = -1;
             $.each(self.options.columns, function(i, v) {
@@ -3144,8 +3207,22 @@ requires
             return Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize);
         }
 
-        function moveColumn(id) {
-            
+        function moveColumn(id, pos) {
+            Ox.print("moveColumn", id, pos)
+            var startPos = getColumnPositionById(id),
+                stopPos = pos,
+                startClassName = ".OxColumn" + Ox.toTitleCase(id),
+                stopClassName = ".OxColumn" + Ox.toTitleCase(self.visibleColumns[stopPos].id),
+                $column = $(".OxTitle" + startClassName),
+                $order = $column.next(),
+                $resize = $order.next();
+            $column.detach().insertBefore($(".OxTitle" + stopClassName));
+            $order.detach().insertAfter($column);
+            $resize.detach().insertAfter($order);
+            $.each(that.$body.find(".OxItem"), function(i, v) {
+                var $v = $(v);
+                $v.children(startClassName).detach().insertBefore($v.children(stopClassName));
+            });
         }
 
         function removeColumn(id) {