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==0) startElement.parent.offsetHeight;

    var offsetObj = startElement;
    startElement.x = 0;
    startElement.y = 0;
    while(offsetObj.offsetParent.tagName!='BODY') { 
        startElement.x += offsetObj.offsetLeft
        startElement.y += 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 || 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!=-1) index = 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.