javascript - "Flood fill"带有 Javascript 的父 DIV 中的子 DIV 元素

Question

我有一个容器 DIV，里面有绝对定位的子 DIV。可以相对于父容器 DIV 拖放子 DIV。 (使用 jQuery 用户界面)

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

想象这样的事情 http://jsfiddle.net/mCuLE/2/

CSS 。堵塞 { position:absolute； 宽度: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 不适合并“流血”出该区域应该没问题。

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。这只是部分解决方案，因为在编写算法以遍历所有相邻的空方 block 之前我完全筋疲力尽了。有人可能会在一秒钟内把它掀起来，但目前它超出了我的范围。这是一个 working fiddle你可以玩。