3.2.0

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:


Back to support forum