3.2.0
Forum Demo Guide API Store

Drag & Drop (reorder) Columns Example

At least I found those buggy lines !! :)
Didn't test it under Safary and most newer Browsers & versions, so if someone could do it for me would be great ( before clean vars and final review)

Here is a complete sample : 

<html>
<head>
    <title>ActiveWidgets Grid :: Examples</title>
<style type="text/css">
    .aw-quirks * {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    body {font: 12px Tahoma}
</style>

    <!-- ActiveWidgets stylesheet and scripts -->
    <script src="../../runtime/lib/aw.js" type="text/javascript"></script>
    <link href="../../runtime/styles/vista/aw.css" rel="stylesheet">

</head>
<body>
    <script>
        var myColumns = [ "0", "1", "2", "3", "4"	];

    //	create ActiveWidgets Grid javascript object
//		var obj = new AW.Grid.Extended;
//	obj.setFixedLeft(0);	// number of fixed columns on the left side
    var obj = new AW.UI.Grid;
obj.setId("maingrid");

    //	provide cells and headers text
//	obj.setCellText(myData);
    obj.setCellText(function(c,r){return c + '-' + r});
    obj.setHeaderText(myColumns);

    //	set number of rows/columns
    obj.setRowCount(350);
    obj.setColumnCount(5);

    //	enable row selectors
    obj.setSelectorVisible(true);
//		obj.setSelectorVisible(false);
    obj.setSelectorText(function(i){return this.getRowPosition(i)+1});

    //	set headers width/height
    obj.setSelectorWidth(28);
    obj.setHeaderHeight(20);
    
    obj.setCellEditable(false); // disable editing
obj.setVirtualMode(true); // disable Virtual Mode
    //	set row selection
    obj.setSelectionMode("single-cell");
    
        obj.setControlSize(300, 200);	// width, height
    obj.setControlPosition(327, 50);	// left, top - adds 'position:absolute'


/**** Column dragging ************/
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
var headerCol = obj.getHeadersTemplate();
var anyRowCol = obj.getLayoutTemplate();
var RowZoneUp = obj.getRowsTemplate();
var mousedownCol = false;
var startX;
var startY;
var startElement;
var startElementChild;
var startElementId;
var clickedHeaderNum;
var firstColElem;
var gridElem;
var gridRef;
var GridIndices = [];
var rightScroll;
///***********************************///
        var GridWidth ;  
        var GridLeft ;          
        var ScrollZoneSize=40;  
        var HorizSBSize=20;  
        var MaxScrollRight;
///---------------------------------------////
/////////////////////////////////////////////////
var dragColStart = function(event) {

// dragStart FF
if(!AW.ie) { 
 startElementChild = event.target ;
   startX = AW.getLeft(startElementChild)   ;
//   startX = event.pageX ;
 	startY = event.pageY ;  
 }
 // dragStart IE
else{ 
startElementChild = event.srcElement 
startX = AW.getLeft(startElementChild) ;
 	startY = event.screenY ;  
}

 var sECId = startElementChild.id ;
  if (sECId.indexOf("-box") > 0 ){startElement = startElementChild.parentNode }
 if (sECId.indexOf("-box-text") > 0 ){ startElement = startElementChild.parentNode.parentNode }
 startElementId = startElement.id ;

//get column number
 var arrofheaders;

  arrofheaders = startElementId.split("-");
 clickedHeaderNum = arrofheaders[2];

// Main Reference to Grid Object -//***************************
gridRef = startElementChild.id.substring(0, startElementChild.id.indexOf('-'));

 var SelectorPadding = AW.object(gridRef).getSelectorWidth()<0 ? parseInt(AW.object(gridRef).getSelectorWidth()).split('px'):0;
 
GridWidth = document.getElementById(gridRef).offsetWidth;  
//GridLeft = document.getElementById(gridRef).offsetLeft; 
GridLeft = !AW.ie ? document.getElementById(gridRef).offsetLeft : document.getElementById(gridRef).offsetLeft + AW.object(gridRef).getSelectorWidth()   ;


//MaxScrollRight = AW.object(gridRef).getScrollWidth() - GridWidth + AW.object(gridRef).getSelectorWidth() + 20;
MaxScrollRight = AW.object(gridRef).getScrollWidth() - GridWidth + SelectorPadding + 17;
rightScroll = AW.object(gridRef).getScrollLeft();

     firstColElem = startElement.parentNode.firstChild;

    startElement.width=startElement.offsetWidth;
    startElement.height=startElement.offsetHeight;
    
    if (startElement.width==0) { startElement.parentNode.offsetWidth;}


    var offsetObj = startElement;

if(!AW.ie) {  startElement.x = - AW.object(gridRef).getScrollLeft() }
else{  startElement.x = - window.screenLeft - AW.object(gridRef).getScrollLeft()  }

startElement.y =0;
 for(i=0;i<clickedHeaderNum;i++) {
 	startElement.x += AW.object(gridRef).getColumnWidth(i) 
}
    mousedownCol = true;
}

//////////////////////////////////////////////////////////////////
var dragCol = function(event) {

if(!AW.ie) { var x = event.pageX  ; var y = event.pageY ; }
else{ var x = event.screenX - AW.object(gridRef).getSelectorWidth(); var y=event.screenY }
//if(AW.opera){ var x = event.pageX + rightScroll ; var y = event.pageY ; }

var DragColDiv = document.getElementById('DragColDiv');

    if(DragColDiv) {  

if(!AW.ie) { DragColDiv.style.left = x - AW.getLeft(firstColElem)  +2 }
else{ DragColDiv.style.left = x - window.screenLeft + AW.object(gridRef).getSelectorWidth()- AW.getLeft(firstColElem) +2  }

    //// ---- START AUTO SCROLL CODE ---- ////  
   //// If Vertical Scroll Bar is not present then set adjustment to 0 ////  
        if ( AW.object(gridRef).getScrollWidth()-document.getElementById(gridRef).offsetWdith +2 <= 0 ) { HorizSBSize=0 }  
        
        //// Near Left, Scroll grid to left if possible ////  
        if ( x < GridLeft  + ScrollZoneSize) {  
          NewScrollRight =   AW.object(gridRef).getScrollLeft() - ScrollZoneSize;  
          if (NewScrollRight < 0) NewScrollRight=0;  
          AW.object(gridRef).setScrollLeft(NewScrollRight);  
        } 
           ///// Near Right, Scroll grid to right if possible ////  
        if ( x > GridLeft + GridWidth - ScrollZoneSize - HorizSBSize) {  
            NewScrollRight = AW.object(gridRef).getScrollLeft() + ScrollZoneSize;  
            if (NewScrollRight > MaxScrollRight) NewScrollRight = MaxScrollRight;  
            if (NewScrollRight >= AW.object(gridRef).getScrollLeft()) AW.object(gridRef).setScrollLeft(NewScrollRight);  
        }  
     
           if( !AW.ie){ DragColDiv.style.left = x - AW.getLeft(firstColElem) +  2 }
           if( AW.ie){ DragColDiv.style.left = x - window.screenLeft + AW.object(gridRef).getSelectorWidth() -  AW.getLeft(firstColElem) + 2 } 
   if(AW.opera){DragColDiv.style.left = x - AW.getLeft(firstColElem) + NewScrollRight  +2 }
      //// ---- END AUTO SCROLL CODE ---- /////  
  }

    else if(mousedownCol && (x<startElement.x || x>(startElement.x+startElement.width ))) {
        var DragColDiv = startElement.cloneNode(true)
        DragColDiv.id = "DragColDiv";
//		DragColDiv.name = "DragColDiv";
        DragColDiv.style.position = "absolute";
        DragColDiv.style.top = startElement.y ;
        DragColDiv.style.width = startElement.width;
        DragColDiv.style.height = startElement.height;
//		DragColDiv.style.height = AW.object(gridRef).getScrollHeight();
  	DragColDiv.style.zIndex = 1000000;
            DragColDiv.style.MozOpacity = 0.7; 
            DragColDiv.style.filter = "alpha(opacity=80)";
            DragColDiv.style.padding = "1";  
  	DragColDiv.style.color = "brown";

        startElement.parentNode.appendChild(DragColDiv);
   }
  }
/////////////////////////////////////////////////////////////

var getIndexFromId = function(id) {
    var indexclk = clickedHeaderNum ;

    for(i=0;i<GridIndices.length;i++) if(GridIndices[i]==Number(indexclk)) {indexclk=i; break;}
    return indexclk;
}
//////////////////////////////////////////////////////////
var getHeaderIndexAt = function(x) {

var offsetsum=  0;
var columna;
 
 for(i=0;i<GridIndices.length;i++) {
 offsetsum += AW.object(gridRef).getColumnWidth(GridIndices[i] ) 
if(x < offsetsum   ){ columna = i; break;}
 } 
return columna;
}
/////////////////////////////////////////////////////////
var dragColEnd = function(event) {
if (!mousedownCol){return false}
else{
    mousedownCol = false;
    
if(!AW.object(gridRef).getColumnIndices() ){ 
for(i=0; i < AW.object(gridRef).getColumnCount();i++){
    GridIndices[i] = i;
}
 window.setTimeout( function(){ 
AW.object(gridRef).setColumnIndices(GridIndices) 
  }, 200 ); 
}	

    if( startElement.parentNode.id = "DragColDiv" ){

    var indexclk = clickedHeaderNum ;
    var widthantcols =0;
    for(i=0;i<GridIndices.length;i++) if(GridIndices[i]==Number(indexclk)) {indexclk=i; break }
  else{widthantcols+=AW.object(gridRef).getColumnWidth(GridIndices[i-1] )}
 
var dragIndex = indexclk;

if(!AW.ie) {  var x = event.pageX }
else{ var x = event.screenX - window.screenLeft - AW.getLeft(firstColElem)  -  AW.object(gridRef).getSelectorWidth() }

if(AW.ie)	{	var dropIndex = getHeaderIndexAt(x) }

if(!AW.ie) {
 var dropIndex = getHeaderIndexAt(  x - startX  + widthantcols  + AW.object(gridRef).getScrollLeft() - rightScroll )  ;
}
if(AW.opera){ var dropIndex = getHeaderIndexAt(  x - startX  + widthantcols  + AW.object(gridRef).getScrollLeft()  ) }

}

window.setTimeout( function(){ /// START TIMEOUT (needed for maintain sorting )

 if(typeof(dropIndex)!='undefined' && typeof(dragIndex)!='undefined'){

        var moveCol = false;
        var dragValue = GridIndices[dragIndex];

        if(dragIndex<dropIndex ){
    	for(i=dragIndex;i<dropIndex;i++) GridIndices[i]=GridIndices[i+1];
    	}
        if(dragIndex>dropIndex ){
     for(i=dragIndex;i>dropIndex;i--) GridIndices[i]=GridIndices[i-1];
        }
        GridIndices[dropIndex] = dragValue;
  }
        AW.object(gridRef).setColumnIndices(GridIndices);
   }, 90); /// END TIMEOUT
  	}
 }

///////////////////////////////////////////////////////////////////

headerCol.setEvent("onmousedown", dragColStart);
headerCol.setEvent("onmouseup", dragColEnd);
obj.setEvent("onmousemove", dragCol);
anyRowCol.setEvent("onmouseup", dragColEnd );
//headerCol.setEvent("onblur", dragColEnd );
RowZoneUp.setEvent("onmouseup", dragColEnd );
/*******************************/

 //write grid html to the page
 document.write(obj);

    </SCRIPT>
</body>
</html>
Carlos
November 8,
Uppss, forgot to thank Rob Francis, for his fantastic enhancement on drag scrollable zone ( without it, couldn't be possible).

http://www.activewidgets.com/javascript.forum.11225.59/this-example-shows-how-to.html

Thanks again Rob
Carlos
November 8,
Thanks Carlos,

I need the Drag & Drop method for barcode generation right now.
Sybil
November 25,

This topic is archived.

See also:

This example shows how to Drag and Drop Rows in a v2.0 Grid to change the row order Rob Francis (59)
Column Header DropdownBox Filter Example Required Andy (28)
Search Grid Column For Match Joe (45)
RC1 Example & Question: Combo in a grid column. Rob Francis (13)
Filter, Expert Footer, Expert ToolBar and more - Examples Paulo Cesar Silva Reis (PC from Brazil). (24)
Simple PHP/MySQL example Alex (ActiveWidgets) (22)
Hiding columns Kwooda (16)
Example - saving editable grid data to the server Alex (ActiveWidgets) (18)
How do you add an image to the first column in a grid? L. Aragon (17)
2.0 examples Jim (15)

Back to support forum

Search

New Data Grid
Angular Data Grid
React Data Grid
Vue Data Grid
Svelte Data Grid

Version 2

Looking for AW 2.6 ?
The old site is here.

ActiveWidgets is a javascript library for creating user interfaces. It offers excellent performance for complex screens while staying simple, compact and easy to learn. Deployed by thousands of commercial customers in more than 70 countries worldwide.

Copyright © ActiveWidgets 2021
Getting Started
 
Sample Code API Reference Support Forum Prices & Licensing
 
Contact Us