使用 Javascript 在父 DIV 中“填充”子 DIV 元素答案

【问题标题】："Flood fill" child DIV elements inside a parent DIV with Javascript使用 Javascript 在父 DIV 中“填充”子 DIV 元素
【发布时间】：2014-03-07 09:02:25
【问题描述】：

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

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

想象一下这样的http://jsfiddle.net/mCuLE/2/

css 。堵塞 { 位置：绝对；宽度：31px；高度：31px；边框：1px 实心#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 不适合并且“流血”出该区域应该没问题。

【问题讨论】：

标签： javascript jquery html flood-fill

【解决方案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。

【讨论】：