Contribution: AW and Draggable DIVs
I've now finished the drag code. Rather than place it here, I've installed it on this page -
which should make it easier to download as well as allowing it to be tested immediately.
For my development, I used FireFox 2, Netscape 7.1 and IE6. I also tested on Netscape 8.2 and Flock 1.1.
I elected to use DIVs but I see no reason why some other suitable objects can't be used. To do so just requires a simple change to the js code where it checks for the tagName.
The example I created used 3 types of positioning with the DIVs - relative (the first 6 and the last one), absolute (the 7th example) and fixed (the 8th example). Statically positioned DIVs turn out not to be draggable. IE 6 doesn't handle fixed positioning and treats it as static.
I support dragging via two mechanisms - either the whole object or via a dragbar. My example includes an AW grid made draggable via either method (DIV 2 and 6). One problem I have with it is that its rather sluggish. I don't know if its due to event issues or whether there's too much redrawing going on when dragging. (Netscape isn't supported by AW and has a problem with a ghost image to the right of the first DIV. This flashes as it gets dragged which is why I suspect rendering is slowing it down.)
As can be seen from the test page above, I tile the first 6 relatively positioned DIVs. IE 6 has a major problem with this. In each case, it made the last DIV in a row lest that 50% of its correct size (irrespective of the displayable width).
While its a bug in IE, I don't expect people would ordinarily do it like this. IE also has a problem with transparent borders. It shows an outline border around the dragbar as a result. The other browsers do it correctly. However, IE's idea about the border being part of the element's size has some merit. It certainly made it easier to get some display issues looking more correct. Compare this to the other browsers where their sizes appear uneven.
One other interesting difference between IE and the others is that IE will only display the page scrollbars if you drag the absolutely positioned DIV down, to the right or diagonally down and right. The others do it for the relatively positioned ones too.
I also set up boundary checking for the left and top. This can be removed by removing the bounds parameter passed to the function as well as the idlist object array and any references to both in the code.
Boundary checking also shows up an interesting bug in the Gecko family of browsers. Dragging any of the relatively positioned DIVs to the left edge and then down until a vertical scrollbar appears causes the DIV to be offset to the left by a few pixels. I wasn't able to fix this.
I haven't tried other AW objects apart from grids but I see no reason why they shouldn't work. If anyone wants to test them and report their findings I would appreciate it.
If anyone tests with other browsers, I would appreciate any reports on problems/fixes etc.
Dragbars might be better implemented as an image. At least that would be consistent across browsers. It also means not having to hardcode the border size for the dragbar in the function.
Setting a DIV's position in a CSS declaration means that the position isn't readable the first time by the function. This would cause a DIV to jump on first dragging it to its unpositioned location. This can be solved by setting its position inline. That is -
... style="left:50px;top:50px" ...
or, alternately, setting it via the AW object methods.