Question

我必须实现一个单元格网格，用户必须能够通过拖放选择特定的单元格。下降。列和行的数量是预定义的（45 x 30单元格），单元格必须是正方形。网格还需要放置在响应式Twitter Bootstrap布局（流体行）中。

我使用了jQuery UI＆＃39; draggable并在流体范围内指定了一个<section>的包含：

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

问题是只有在IE（目前为止仅测试版本11）中，可拖动元素（通过jQuery生成并从左上角开始并且具有例如2x2单元格的大小）可以被拖动，但是当我试着把它拖回到左上角的东西，收容物搞砸了，我不能再把它拖到收容区的边缘了。

我设置了一个显示问题的JSFiddle：http://jsfiddle.net/e2yfC/307/。

我尝试清理所有额外的JavaScript代码，以便更容易阅读。正如您将看到的，只有当包含网格的流体跨度具有百分比宽度（或宽度如847.23px）时，才会出现此问题。由于bootstrap列（span9）需要流畅，我无法解决问题。

我还尝试将网格包装在另一个div中，我指定父级（Math.floor()）宽度的非百分比宽度（fluid span9但是没有效果。

Answer 1

我尝试了你的小提琴，我不明白为什么它表现得那样。

尝试删除margin: 0px auto;中的#grid，然后我就可以将元素拖回左上角。

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

IE中的jQuery UI可拖动遏制错误

1 个答案: