Question

I have a list of div elements, which is dragable items.

I need to do, that all elements, i will generate random top and left positions, which will be in range of my container, but i dont know how to do it 🙂

Container div is: width: 800px; height: 500px;

My js now is like:

var randomTopPos = Math.floor(Math.random() * (600 / 2));
var randomLeftPos = Math.floor(Math.random() * (5));

$(".t-shirt-design").css({
    'top' : randomTopPos,
    'left': randomLeftPos
});

Answer 1

Given than your container id is container and your draggable id is dragid, you can do as follows:

ctop = $('#container').offset().top;  // container top
cleft = $('#container').offset().left;// container left
cheight = $('#container').height();   // container height
cwidth = $('#container').width();     // container width

$(".t-shirt-design").each(function() {
   dragheight = $(this).height(); //your draggable height
   dragwidth  = $(this).width(); // your draggable width
   randomtop = ctop + Math.floor((Math.random()* (cheight - dragheight))+1);
   randomleft = cleft + Math.floor((Math.random()* (cwidth - dragwidth))+1);
   $(this).css({
     'top' : randomtop,
     'left': randomleft
   });
});

UPDATE:
Updated the code to accomodate several .t-shirt-design elements

UPDATE 2:
Also you have an error in your html code, an html element can only have ONE id, you have two in your container html element, as follows:

<div id="tshirts-designs homepage">

replace it for just one, the correct would be:

<div id="homepage">

UPDATE 3:
Looking at your page, I adjust my code to better fit your requirements (your draggable elements have different widths and heights), so try my update code instead, also better execute this code on the window.load event, instead of .ready , as we need the images to be loaded so the div heights and widths are the correct ones, so replace your following line:

$(document).ready(function() {

for this one:

$(window).load(function() {