jquery - 如何设置 div 的样式，使它们不会相互堆叠？

Question

我正在尝试在单个 div 中创建一个由 jquery.droppable 元素组成的 X x Y 网格。

for (var y = 0; y < 3; y++) {
        for (var x = 0; x < 3; x++) {
            $('<div>grid_' + x + '-' + y + '_').data( {'coordinates': [x, y]} ).appendTo( '#canvas-screen' ).droppable( {
                accept: '#elements-screen div',
                hoverClass: 'hovered',
                drop: handleElementDrop
            });
        }
    }

如您在上面的代码中所见，我创建了 9 个 jquery.droppable 元素并将它们附加到名为 #canvas-screen 的 div 中。唯一的问题是它们只是将一个堆叠在另一个之上。我怎样才能让它成为一个 3 x 3 的网格，或者更一般地说，一个 m x n 的网格，因为我稍后会希望用户选择尺寸。

在 DOM 加载后检查我的元素时，我得到:

<div id="canvas-screen">
  <div class="ui-droppable"></div>
  <div class="ui-droppable"></div>
  <div class="ui-droppable"></div>
  <div class="ui-droppable"></div>
  <div class="ui-droppable"></div>
  <div class="ui-droppable"></div>
  <div class="ui-droppable"></div>
  <div class="ui-droppable"></div>
  <div class="ui-droppable"></div>
</div> 

这对我来说很有意义，但我只是不确定要添加什么 CSS 才能使其不只是相互堆叠。

Answer 1

这是使用 javascript 以编程方式设置网格的可能解决方案。每个元素根据其宽度、高度、x 和 y 定位。

var width = 100,
    height = 100,
    m = 3,
    n = 3;
for (var y = 0; y < m; y++) {
        for (var x = 0; x < n; x++) {
            $('<div>grid_' + x + '-' + y + '_').data( {'coordinates': [x, y]} )
                .css({
                  "width"    : width  + "px",
                  "height"   : height + "px",
                  "left"     : width * x  + "px",
                  "top"      : height * y + "px",
                  "position" : "absolute"
                })
                .appendTo( '#canvas-screen' )
                .droppable( {
                    accept: '#elements-screen div',
                    hoverClass: 'hovered',
                    drop: handleElementDrop
                });
         }
}