Question

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

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

kpscript，不知道你的画布应该有多大，但你可以添加一个浮动样式：左边的每个.ui-droppable，然后给＃canvas-screen一个宽度。

#canvas-screen {
     width: 500px;
}
.ui-droppable {
     width: 33%;
     float: left;
}

Answer 2

这是使用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
                });
         }
}

Answer 3

这是另一种替代解决方案，我给固定宽度50px的droppable框

<style>    
.column{
    clear:both;
}
.ui-droppable{
  width:50px;
  height:50px;
  border:1px solid black;
  display:block;  
  float:left;
}
</style>
<script>
    $(document).ready(function(){
        for (var y = 0; y < 3; y++) {
            $('<div class="column">').appendTo( '#canvas-screen');
            for (var x = 0; x < 3; x++) {
                $('<div>grid_' + x + '-' + y + '_').data( {'coordinates': [x, y]} ).appendTo( ".column:eq("+y+")").droppable( {
                    accept: '#elements-screen div',
                    hoverClass: 'hovered',
                    drop: handleElementDrop
                });
            }
        }
    function handleElementDrop(){
    }
    });
</script>


    <div id="canvas-screen">
    </div>

如何设置div的样式，使它们不会叠加在一起？

3 个答案: