在div中隨機創建和定位元素

Question

Using the code submitted here，我如何在預定義div的範圍內做類似（如果不是相同的）事情？

提供的代碼2pha具有渲染這些對象的寬度和高度的變量，但是我不確定如何實際定位渲染它們的「框」。

這可能是值得注意的，我是一個極端的初學者，所以請原諒我，如果這是一個愚蠢的問題。

感謝很多:)

Answer 1

在代碼中，你正在尋找的寬度和整個窗口的高度被確定，並作爲邊界的所有隨機箱子：

var ww = $(window).width(); 
var wh = $(window).height(); 

如果，相反，你想要所有的隨機框在另一個div（我給它的編號爲container），你可以只讀該框的寬度和高度。

var ww = $("#container").width(); 
var wh = $("#container").height(); 

你也想隨機箱子追加到div容器，而 比body。

for(var x=1;x<=numTickets;x++){ 
    $(ticket).appendTo("#container"); 
} 

這裏有一個演示：

var ticket="<div class='ticket'><p>Random<br />Box</p></div>"; 
 
    var numTickets=10; 
 
    for(var x=1;x<=numTickets;x++){ 
 
     $(ticket).appendTo("#container"); 
 
    } 
 
    // get container dimentions 
 
    var ww = $("#container").width(); 
 
    var wh = $("#container").height(); 
 
    $(".ticket").each(function(i){ 
 
     var rotationNum=Math.round((Math.random()*360)+1); 
 
     var rotation="rotate("+rotationNum+"deg)"; 
 
     var posx = Math.round(Math.random() * ww)-20; 
 
     var posy = Math.round(Math.random() * wh)-20; 
 
     $(this).css("top", posy + "px").css("left", posx + "px").css("transform",rotation).css("-ms-transform",rotation).css("-webkit-transform",rotation); 
 
    });

.ticket{ 
 
    position: absolute; 
 
    background: #F90; 
 
    padding: 7px 3px; 
 
} 
 

 
#container{ 
 
    width:400px; 
 
    height:400px; 
 
    border:1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    
 
</div>