在 div 元素內的 HTML/JS 中繪制矩形網格的最簡單方法？

Question

我正在嘗試創建一個簡單的用戶界面，允許用戶將數獨謎題堆疊在一起。 到目前為止，界面的粗略外觀是這樣的。

我現在想實現允許我在右側的白色矩形 (div) 內生成數獨網格的邏輯。 例如，如果用戶輸入第 4 列和第 4 行，它必須生成一個 4x4 矩形，看起來像這樣（但當然更小:)）：

一旦像這樣的網格位於該正方形內，我希望用戶可以將其拖動到左側的灰色 div 區域。 但是當你這樣做時，白色矩形內的那個應該保留（所以基本上當你拖動那個正方形時，你將它的一個克隆拖到左側 - 這樣你就可以從白色正方形中抓取額外的網格並堆疊盡可能多的他們在左邊隨心所欲。

最好在灰色區域有一個大網格，以便您可以對齊拖動到那里的方塊（不需要剪輯）。 歡迎所有的建議！

提前致謝 ：）

Answer 1

不久前我在 jQuery 中寫了這個。 它可能需要適應您的需求，但本質上它會創建任何大小的網格。

// HTML elements

var game_element = $('.game'); // Main game html
var grid_parent = $('.grid');
var grid_section = $('.grid_section')
var grid_parent_html = '<div class="grid"></div>';
var grid_section_html = 'grid_section';

/**
* CREATE THE GRID. Function loops through section count and appends the
* neccessary components with correct widths in relation to the screen size.
**/

function create_grid(horizontal,vertical){

    // Set the height and widths of the grid sections
    p_width = 100 / horizontal + '%';
    p_height = 100 / vertical + '%';

    // Loop through required sections and append to our main grid
    for(i = 0; i < horizontal * vertical; i++){
        grid_parent.append(
            '<div style="width:' + 
            p_width + ';height:' + p_height + '" class="' + 
            grid_section_html + '"></div>'
        );
    }
    section_total = horizontal * vertical;
}


create_grid(4,4);

和一點點 CSS

*{
    box-sizing:border-box;
}

body{
    height:100vh;
    margin:0;
    padding:0;
    .grid_holder{
        padding:50px;
        height:100vh;
        .grid{
            height:100%;
            &_section{
                float:left;
                box-shadow:0px 0px 0px 1px black inset;
                padding:10px;
            }
        }
    }
}

你可以在這里看到一個工作示例http://codepen.io/jcoulterdesign/pen/a4134449d800430fafedce13122f207a