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>
Forum search
