DataTable column resizing bug in IE8.

[openfaces]

[Nicholas Oxhøj] In IE8, the DataTable column resizing functionality doesn't receive mouse-up events outside the browser window. If you therefore release the mouse button outside the browser window, then enter the window again, the column separator is till "following" the mouse. If you then click the column separator again, to stop the resizing/dragging operation, you get a script error from util.js: '_draggingWasStarted' is null or not an object.

This problem can be exhibited by going to the DataTable demo: http://www.openfaces.org/demo/datatable/DataTable_general.jsf Size the browser window, so it is not full screen. click and hold the mouse button on one of the column separators to start dragging. Move the mouse cursor outside the browser window and release the mouse button. Move the mouse cursor inside the browser window again. The column separator will keep following the mouse cursor. Click (and release) the column separator and you should get the script error.

As mentioned, the problem is that the document doesn't receive the mouse-up event outside the browser window and the drag operation is therefore not ended when the button is released. When you then click the column separator again, to try and stop the dragging, you actually start a second drag operation. And when you release the mouse button, the "onmouseup" event listener is fired twiced, once for each drag operation. First time it will set O$._draggedElement to "null" which then causes the script error when the event listener is fired the second time...

I have tried to fix this by using the IE specific setCapture()/releaseCapture() functionality to receive the "onmouseup" event, even when the cursoris outside the browser window. Just for good measure I also added a check to ensure that we do not start a new drag operation as long as we are already dragging.

I hope this fix will also work for other draggable elements, but I haven't tested this...