:: Forum >> Version 2 >>

It is possible to drag column header outside of table?

I need do sometings... but before, need drag column header (click and drag) outside of table... i got the DRAG HEADER code, look below:

/**** Column dragging ************/
var header extendedGrid.getHeaderTemplate();
var 
mousedown false;
var 
startX;
var 
startY;
var 
startElement;
var 
startElementChild;

var 
dragStart = function(event) {
    
startX=event.screenX;
    
startY=event.screenY;
    
startElementChild=event.srcElement;
    
startElement=startElementChild.parentNode;
    
startElement.width=startElement.offsetWidth;
    
startElement.height=startElement.offsetHeight;
    if (
startElement.height==0startElement.parent.offsetHeight;

    var 
offsetObj startElement;
    
startElement.0;
    
startElement.0;
    while(
offsetObj.offsetParent.tagName!='BODY') { 
        
startElement.+= offsetObj.offsetLeft
        startElement
.+= offsetObj.offsetTop
        offsetObj 
offsetObj.offsetParent
    
}
    
mousedown true;
}

var 
drag = function(event) {
    var 
x=event.screenX;
    var 
y=event.screenY;
    var 
dragHeaderDiv document.getElementById('dragHeaderDiv');
    if(
dragHeaderDiv) {
         
dragHeaderDiv.style.left x;
    }
    else if(
mousedown && (x<startElement.|| x>(startElement.x+startElement.width))) {
        var 
dragHeaderDiv startElement.cloneNode(true)
        
dragHeaderDiv.id "dragHeaderDiv";
        
dragHeaderDiv.className dragHeaderDiv.className.replace(RegExp("sort-(ascending|descending)""g"), "sort-none");
        
dragHeaderDiv.className += " active-header-over";
        
dragHeaderDiv.setAttribute("onmouseleave","")
        
dragHeaderDiv.setAttribute("onmouseenter","")
        
dragHeaderDiv.style.position "absolute";
        
dragHeaderDiv.style.left x;
        
dragHeaderDiv.style.top startElement.y;
        
dragHeaderDiv.style.width startElement.width;
        
dragHeaderDiv.style.height startElement.height;
        
dragHeaderDiv.style.zIndex 10000;
        
dragHeaderDiv.style.MozOpacity 0.7;
        
dragHeaderDiv.style.filter "alpha(opacity=70)"
        
startElement.parentNode.appendChild(dragHeaderDiv);
    }
}

var 
getIndexFromId = function(id) {
    var 
colonPos id.indexOf(":");
    var 
slashPos id.indexOf("/");
    var 
index id.substring(colonPos+1);
    if(
slashPos!=-1index id.substring(0,slashPos);
    var 
indices extendedGrid.getHeaderIndices();
    for(
i=0;i<indices.length;i++) if(indices[i]==Number(index)) {index=i; break;}
    return 
index;
}

var 
getHeaderIndexAt = function(x) {
    var 
headersDiv document.getElementById(extendedGrid.getId()+".layout/top");
    var 
offsetObj headersDiv;
    var 
offsetX 0;
    while(
offsetObj.offsetParent.tagName!='BODY') { 
        
offsetX += offsetObj.offsetLeft
        offsetObj 
offsetObj.offsetParent
    
}

    var 
headers headersDiv.childNodes;
    var 
column 0;
    for(
i=0;i<headers.length;i++) {
        if(
x>=offsetX && x<(headers[i].offsetWidth+offsetX)) { column=i; break; }
        
offsetX+=headers[i].offsetWidth;
    }    
    return 
column;
}

var 
dragEnd = function(event) {
    
mousedown false;
    var 
dragHeaderDiv document.getElementById('dragHeaderDiv');
    if(
dragHeaderDiv) {
        
startElement.parentNode.removeChild(dragHeaderDiv);
        var 
x=event.screenX;
        var 
dragIndex getIndexFromId(startElement.id);
        var 
dropIndex getHeaderIndexAt(x);
        var 
indices obj.getColumnValues();
        
dropIndex dropIndex>(indices.length-1)?(indices.length-1):dropIndex;
        var 
move false;
        var 
dragValue indices[dragIndex];
        if(
dragIndex<dropIndex)    for(i=dragIndex;i<dropIndex;i++) indices[i]=indices[i+1];
        else for(
i=dragIndex;i>dropIndex;i--) indices[i]=indices[i-1];
        
indices[dropIndex] = dragValue;
        
obj.setColumnValues(indices);
        
obj.refresh();
    }
    else if(
event.srcElement==startElementChild) {
        
header.setClass("header""pressed");
        
window.status "Sorting...";
        
header.timeout(function(){header.action("columnSort")});
    }
}

header.setEvent("onmousedown"dragStart);
extendedGrid.setEvent("onmouseup"dragEnd);
extendedGrid.setEvent("onmousemove"drag);
 
Im trying make this work... some bugs yet... can anyone help me?

tkz.
pc
Friday, April 7, 2006



This topic is archived.

Back to support forum

Forum search