Feature Request: Live Updating of Column Location

[GoogleCodeExporter]

I am trying to add functionality for this to update the location of the 
column while the column is still being held by the mouse. I tried to do 
that by separating the removeEvents from the rest of the actions in the 
dragEnd function so that you could have it update without removing the 
listeners
but when I created a new function with the code from within dragEnd, it 
didn't work 
here's what I tried
dragEnd: function(event) {
    if (dragtable.browser.isIE) {
      document.detachEvent("onmousemove", dragtable.dragMove);
      document.detachEvent("onmouseup", dragtable.dragEnd);
    } else {
      document.removeEventListener("mousemove", dragtable.dragMove, true);
      document.removeEventListener("mouseup", dragtable.dragEnd, true);
    }

   dragtable.columnUpdate;
  },
  columnUpdate: function()  {
     // If the floating header wasn't added, the mouse didn't move far 
enough.
    var dragObj = dragtable.dragObj;
    if (!dragObj.addedNode) {
      return;
    }
    dragObj.tableContainer.removeChild(dragObj.elNode);

    // Determine whether the drag ended over the table, and over which 
column.
    var pos = dragtable.eventPosition(event);
    var table_pos = dragtable.absolutePosition(dragObj.table);
    if (pos.y < table_pos.y ||
        pos.y > table_pos.y + dragObj.table.offsetHeight) {
      return;
    }
    var targetCol = dragtable.findColumn(dragObj.table, pos.x);
    if (targetCol != -1 && targetCol != dragObj.startCol) {
      dragtable.moveColumn(dragObj.table, dragObj.startCol, targetCol);
      if (dragObj.table.id && dragtable.cookiesEnabled() &&

dragObj.table.className.search(/\bforget-ordering\b/) == -1) {
        dragtable.rememberDrag(dragObj.table.id, dragObj.startCol, 
targetCol);
      }
    }
    },

Original issue reported on code.google.com by maxstrue...@gmail.com on 1 Jul 2009 at 3:05

[GoogleCodeExporter]

This would be great to have, at least as an option, since this is how a desktop
application typically does column dragging.

I'll take a look at your code later this week. In the mean time, I'm going to 
add you
as a contributor to this project...

Original comment by danvdk on 1 Jul 2009 at 4:27

• Changed state: Accepted
• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

cool, thank you
ah, I see you already were thinking of it: line 276

  // TODO: Reorder columns as the mouse moves for a more interactive feel.

Original comment by maxstrue...@gmail.com on 1 Jul 2009 at 5:02

[GoogleCodeExporter]

Original comment by maxstrue...@gmail.com on 1 Jul 2009 at 5:03

• Changed state: Started

[GoogleCodeExporter]

 // Move the floating column header with the mouse
here's what I've tried but it does this weird blinking thing where the columns 
switch 
too frequently 

 // TODO: Reorder columns as the mouse moves for a more interactive feel.
  dragMove: function(event) {
    var x, y;
    var dragObj = dragtable.dragObj;

    // Get cursor position with respect to the page.
    var pos = dragtable.eventPosition(event);

    var dx = dragObj.cursorStartX - pos.x;
    var dy = dragObj.cursorStartY - pos.y;
    if (!dragObj.addedNode && dx * dx + dy * dy > dragtable.dragRadius2) {
      dragObj.tableContainer.insertBefore(dragObj.elNode, dragObj.table);
      dragObj.addedNode = true;
    }

    // Move drag element by the same amount the cursor has moved.
    var style = dragObj.elNode.style;
    style.left = (dragObj.elStartLeft + pos.x - dragObj.cursorStartX) + "px";
    style.top  = (dragObj.elStartTop  + pos.y - dragObj.cursorStartY) + "px";
    dragtable.columnUpdate(event);
    if (dragtable.browser.isIE) {
      window.event.cancelBubble = true;
      window.event.returnValue = false;
    } else {
      event.preventDefault();
    }
  },

  // Stop capturing mousemove and mouseup events.
  // Determine which (if any) column we're over and shuffle the table.
  dragEnd: function(event) {
    if (dragtable.browser.isIE) {
      document.detachEvent("onmousemove", dragtable.dragMove);
      document.detachEvent("onmouseup", dragtable.dragEnd);
    } else {
      document.removeEventListener("mousemove", dragtable.dragMove, true);
      document.removeEventListener("mouseup", dragtable.dragEnd, true);
    }
    var dragObj = dragtable.dragObj;
    if (!dragObj.addedNode) {
      return;
    }
    dragObj.tableContainer.removeChild(dragObj.elNode);

  },

  columnUpdate: function(event) {
       // If the floating header wasn't added, the mouse didn't move far enough.
    var dragObj = dragtable.dragObj;
    if (!dragObj.addedNode) {
      return;
    }
    // Determine whether the drag ended over the table, and over which column.
    var pos = dragtable.eventPosition(event);
    var table_pos = dragtable.absolutePosition(dragObj.table);
    if (pos.y < table_pos.y ||
        pos.y > table_pos.y + dragObj.table.offsetHeight) {
      return;
    }
    var targetCol = dragtable.findColumn(dragObj.table, pos.x);
    if (targetCol != -1 ){//&& targetCol != dragObj.startCol) {
      dragtable.moveColumn(dragObj.table, dragObj.startCol, targetCol);
      if (dragObj.table.id && dragtable.cookiesEnabled() &&
                                        dragObj.table.className.search(/\bforget-
ordering\b/) == -1) {
        dragtable.rememberDrag(dragObj.table.id, dragObj.startCol, targetCol);
      }
    }
  },

Original comment by maxstrue...@gmail.com on 1 Jul 2009 at 7:11