drag&drop of column header

Hello,

to implement a drag & drop of column headers i did the following:

obj.getTemplate("top/item").setEvent("onmousedown", moveHeaderDown);
obj.getTemplate("top/item").setEvent("onmouseup", moveHeaderUp);

this works perectly well with ie, the mousedown event occurs in the correct column and the mouseup event occurs in the correct column.

but with firefox the mouseup event occurs in the same column where i had the mousedown event, this happens only when i click on a part of the header with no text, when i click the text it works with firefox too.

any help would be appreciated, thanks a lot!

Gernot

Hello again,

i got the same problem with the rows, when i do something like this to capture mouse events:

var row = obj.getTemplate("row");

row.setEvent("onmousedown", function(){this.action("mouseDown")});
row.setEvent("onmouseup", function(){this.action("mouseUp")});
obj.setAction("mouseDown", mouseDown);
obj.setAction("mouseUp", mouseUp);
obj.setTemplate("row", row);

when i start dragging a column on a part with text everything works fine, i get the mouse up event on the line where the mouse has bee released.
but when i start draggin a column on a part without text, the mouse down events seem to be captured by the grid and i get the mouse up event on the line where i started dragging.

is there a way to prevent the grid from capturing the mouse down event?

thanks a lot for help!

Hi Gernot,
can u post your code for the columns as well as rows. so that we can have a look into that.

Hi,

it works with columns in the meantime, but i still have the problem with rows. it works with ie, but not with firefox.

this is what i do:

// trigger the mouse events for rows
obj.getTemplate("row").setEvent("onmousedown", mouseDown);
obj.getTemplate("row").setEvent("onmouseup", mouseUp);

// handle mouse down event
function mouseDown(e)
{
if (e.button == 2)
{
return;
}

// get selected line id
fromItem = e.srcElement.id;
doItemDD = 1;

document.onmousemove = getItemXY;
document.onmouseup = endItemMove;
}

function moveItemUp(e)
{
var toItem = e.srcElement.id;

// if mouse down and mouse up occurs on the same line
if (fromItem == toItem)
{
return;
}
}

// handle mouse move event
function getItemXY(e)
{
// show drag item
var elementItem = document.getElementById('ddItem');

if (doItemDD == 1)
{
if (window.Event)
{
ddX = event.pageX;
ddY = event.pageY;
}
else
{
ddX = event.clientX;
ddY = event.clientY;
}

elementItem.style.left = ddX + 'px';
elementItem.style.top = ddY + 'px';
elementItem.style.display = 'block';
}
else
{
elementItem.style.display = 'none';
}
}

// hide drag item
function endItemMove(e)
{
var elementItem = document.getElementById('ddItem');

doItemDD = 0;
elementItem.style.display = 'none';
}

thanks for help.