Question

我有一个容器DIV，里面有绝对定位的子DIV。可以相对于父容器DIV拖放子DIV。（使用jQuery UI）

我需要添加一个功能，如果用户选择了“填充”工具，那么如果他在封闭的DIV区域内单击，他可以用所述子DIV填充空白区域。

的CSS .block { 位置：绝对; 宽度：31px; 身高：31px; border：1px solid＃000; 背景：黄色; }

.child-red {
    position: absolute;
    width: 31px;
    height: 31px;
    border: 1px solid #000;
    background: red;
}

.child-blue {
    position: absolute;
    width: 15px;
    height: 15px;
    border: 1px solid #000;
    background: blue;
}

.child-green {
    position: absolute;
    width: 45px;
    height: 45px;
    border: 1px solid #000;
    background: green;   
}

HTML

<div class="container">
    <div class="block" style="left: 0; top: 0;"></div>
    <div class="block" style="left: 32px; top: 0;"></div>
    <div class="block" style="left: 64px; top: 0;"></div>
    <div class="block" style="left: 96px; top: 0;"></div>
    <div class="block" style="left: 128px; top: 0;"></div>
    <div class="block" style="left: 0; top: 32px;"></div>
    <div class="block" style="left: 0; top: 64px;"></div>
    <div class="block" style="left: 0; top: 96px;"></div>
    <div class="block" style="left: 0; top: 128px;"></div>
    <div class="block" style="left: 32px; top: 128px;"></div>
    <div class="block" style="left: 64px; top: 128px;"></div>
    <div class="block" style="left: 96px; top: 128px;"></div>
    <div class="block" style="left: 128px; top: 128px;"></div>
    <div class="block" style="left: 128px; top: 32px;"></div>
    <div class="block" style="left: 128px; top: 64px;"></div>
    <div class="block" style="left: 128px; top: 96px;"></div>
    <div class="block" style="left: 64px; top: 64px;"></div>
</div>

现在如果我点击白色空白区域内的某个地方，它应该填充空的红色DIV。

另请注意，该方法应足够灵活，以适应不同维度的儿童DIV。如果儿童DIV不适合并且“流血”出该区域，我想应该没问题。

Answer 1

如果您不想要任何花哨的东西，您可以随时设置正方形网格后面元素的背景颜色。

$(".backdrop").on("click", function (e) {
    $(this).css({ 'background-color': "red" });
});

以下是该解决方案的working fiddle。

在我意识到这可能就是你所需要的之前，我想出了一个更为通用的解决方案。这个想法是你的javascript中有一个正方形网格，它公开了根据条件添加css类的方法。这样你可以编写，例如

// when I click an empty square, colour it and the adjacent empty squares red
grid.on("click", ".empty", function (clicked_square) {        
    // colour adjacent squares
    this.addClass("child-red", function (square) {            

        return grid.hasClass(square, "empty") && clicked_square.isAdjacent(square);
    });            

    // colour the square
    this.addClass("child-red", { x: clicked_square.x, y: clicked_square.y });        
});

此解决方案使用两个类，Grid和Square。这只是一个部分解决方案，因为在编写一个算法来遍历所有相邻的空方块之前，我完全失去了动力。有人可能会在一瞬间鞭打它，但此刻它只是超出我。这是你可以玩的working fiddle。

使用Javascript在父DIV内“填充”子DIV元素

1 个答案: