jQuery UI draggable containment bug in IE

Question

I have to implement a grid of cells where the user must be able to select a specific cell through drag & drop. The number of columns and rows is predefined (45 x 30 cells) and the cell must be a square. The grid also needs to be placed in a responsive Twitter Bootstrap layout (fluid row).

I used jQuery UI's draggable and specified a containment which is a <section> inside a fluid span:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">
            ... sidebar
        </div>
        <div class="span9">
            <section id="grid"></section>
        </div>
    </div>
</div>

The problem is that only in IE (tested only Version 11 so far) the draggable element (which is generated through jQuery and starts in the top left corner and has a size of eg 2x2 cells) can be dragged around, but when I try to drag it back to the left top corner something with the containment gets messed up and I can't drag it to the edge of the containment any more.

I setup a JSFiddle that shows the problem: http://jsfiddle.net/e2yfC/307/ .

I tried to clean up all my extra JavaScript Code so it is easier to read. As you will see, the problem only occurs if the fluid span that contains the grid has a percentage width (or a width like 847.23px). Since the bootstrap column ( span9 ) needs to be fluid I cant figure out to solve the problem.

I also tried to wrap my grid inside another div where I specify a non percentage width ( Math.floor() on parents ( fluid span9 ) width but with no effect.

Answer 1

I tried your fiddle and I dont get why its behaving like that.

Try removing the margin: 0px auto; in the #grid and I was able to drag the element back to the top left corner.

#grid {
  //margin: 0px auto; //remove this
  position: relative;
  background: #ffcc00;
}