使用Javascript在父DIV中填充「Flood fill」子元素DIV元素

Question

我有一個容器DIV，裏面有絕對定位的子DIV。子DIV可以相對於父容器DIV拖放。 （使用jQuery UI）

我需要添加一個功能，如果用戶選擇了「填充」工具，那麼如果他在關閉的DIV區域內單擊，他可以用空白區域填充所述子DIV。

想象這樣的事情http://jsfiddle.net/mCuLE/2/

CSS .block { 的位置是：絕對的; width：31px; height：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你可以玩。