Are there guidelines for grid event management?

As a learning exercise, I've been writing code to drag and resize HTML objects (specifically DIVs with AW grids and other objects in them).

I have DIV dragging working correctly with the 3 browsers I'm testing with.

Originally, I thought of placing a drag bar above the grid (and using the borders as the resize region). But now I think this might end up looking a little ugly. So I tried dragging on the grid itself.

With this code change in the onmousedown event function -
// Look up the element tree
while (dobj.tagName != "DIV")
{
if (dobj.tagName == "SPAN" && dobj.className.indexOf("aw-bars-box") > -1)
return false
dobj = AW.ie ? dobj.parentElement : dobj.parentNode
}
I'm able to drag within the grid itself, aside from the scroller regions.

Of course, while it mostly works, my onmousedown event handling has interaction issues with events the grid itself should be handling. I could change things by using one of the other mouse buttons or in combination with shift or control, but I was wondering if my overall approach is sound.

The only other alternative is to add event handlers for each of the specific grid regions I can drag on without risk of conflict (selector, footer, etc.) but I'm not sure if that's going to be any better. The grid itself flashes and jitters as its dragged.

I think using separate drag bar elements is a better approach. I would place them on top of grid borders and make them invisible (transparent) but assign a different mouse cursor and possibly some background color on mouseover only. This is how column resizing is implemented in the grid control (/source/lib/grid/separator.js).

Yes, I set the cursor style to move when the mouse pointer is over a draggable element.

So I guess I'll have to go back to my original idea of using the container border regions for dragging/resizing. The colour change idea is useful, so I'll work on testing that next.