Draggable disturbs absolute positionning
Hello,
I have a very disturbing problem with the jqueryui Draggable interaction.
Basically I'm writing a scheduling web application using
jquery 1.9.1
jqueryui 1.10.2
modernizr 2.6.2
The application displays a grid with schedule cells that CAN be movable.
These cells are div elements with absolute positioning.
If the cell is movable I simply issue the statement:
$cell.draggable();
(I've tried with different option sets but this does not impact the issue)
I was developing this application with Firefox 19 and everything works well, but when I'm testing the application with IE9 or Chrome 25 the draggable cells are not well positioned.
You can have a look at the result using one of the following links (note that they were created using while running jqueryui 1.10.1 but the result is the same with jquery 1.10.2), you can see on the left that non draggable cells are well positioned and on the right draggable cells that are completely disturbed.
IE version
Firefox version
Chrome version
IE screen dump
Firefox screen dump
If you inspect a draggable cell, you'll see that the "bounding box" (don't know the exact word) is much larger on draggable cells and so they "push" the others. It looks like that draggable cells have their absolute positioning changed to relative on IE and Chrome and this could be the source of the problem.
So my question is why is there such a different behaviour between FF and the others (I've also tested on Safari and Opera with the same bad results) and why is the absolute positing of a draggable element overridden on the other browsers ? Should I immplement my positioning using another way or is this a JQueryUi bug?
Many thanks for any help.