追加元素 - 當元素開始溢出容器時停止追加

我嘗試整理一個「棋盤」，您可以使用砌體添加各種大小的元素，並且試圖找出如何停止追加新元素的可能性如果容器已滿並且元素開始溢出它。追加元素 - 當元素開始溢出容器時停止追加

的代碼：

HTML

<input id="width" value="0" type="text"></input> 
<input id="height" value="0" type="text"></input> 
<input id="mLeft" value="0" type="text"></input> 
<input id="mRight" value="0"type="text"></input> 
<button>Add container</button>

jQuery的

$('button').click(function(){ 
    var $pWidth = jQuery("#width").val(); 
    var $truePWidth = $pWidth * 15; 
    var $pHeight = jQuery("#height").val(); 
    var $truePHeight = $pHeight * 15; 
    var $mLeft = jQuery("#mLeft").val(); 
    var $trueMLeft = $mLeft * 15; 
    var $mRight = jQuery('#mRight').val(); 
    var $trueMRight = $mRight * 15; 
    $container.append("<div class='box'><div class='remove'></div></div>").masonry('reload', function(){ 
      $(".box").each(function(i) { 
       $(this).attr("id", "item"+(i+1)); 
      }); 
     $($container).children('.box:last-child').css({'height' : $truePHeight + 'px', 'width': $truePWidth + 'px', 'margin-right' : $trueMRight + 'px', 'margin-left' : $trueMLeft + 'px' }); 
     $container.masonry('reload'); 
    }); 

});

的容器（變量$容器= #container的），其中該元件（■）加入是1600像素高。

在此先感謝！

/Jonas

來源

2012-03-29 Jonas

是否需要切斷它們來源於不想讓它溢出（如在擰上佈局時）或想要設置最大數量的添加？ – Anthony 2012-03-29 15:19:22

正如你在代碼中看到的，我在添加新元素的按鈕上有一個單擊事件。我想要做的是當容器已滿時禁用按鈕。現在我只是使用overflow：hidden;但是這並不能真正解決它，它只是隱藏它們。 – Jonas 2012-03-29 18:03:31

我很抱歉。我爲我的手機上，所以我不能做的代碼，但你可以簡單地設置了CSS的容器如下：

.box { 
    max-height: 1600px; 
    overflow-y: scroll; 
}

這會給容器中的滾動條，而不是擴大的容器，而高度仍然允許你的用戶追加無限量的盒子。

來源

2012-03-29 15:13:58

對不起，如果我不清楚。正如我上面的評論中提到的，我想在容器已滿時禁用click事件（即追加新元素）。 – Jonas 2012-03-29 18:05:34

追加元素 - 當元素開始溢出容器時停止追加

回答

相關問題