Случайное создание и позиционирование элементов в 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>