随机左，顶部位置，jquery，javascript

我有一个div元素列表，它是可拖动的项

我需要做的是，所有元素，我将生成随机的顶部和左侧位置，这将在我的容器范围内，但我不知道如何做：）

容器分区为：宽度：800px；高度：500px

我的js现在是这样的：

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

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

---

用实际值替换

containerHeight

和

containerWidth

。确保物品在容器内，并且具有

位置：相对
看起来你走的是正确的道路

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

$(".t-shirt-design").css({
    'top' : Math.floor(Math.random() * $(this).parent().height() - itemHeight),
    'left': Math.floor(Math.random() * $(this).parent().width() - itemWidth) 
});

Math.random（）
正在生成0到1之间的数字

将这些数字乘以所需的范围，将范围更改为0-range

然后将这些值指定为顶部/左侧位置

一些考虑：

元素的宽度和高度是多少？如果它们不同，则可能需要根据给定对象的宽度/高度生成每个位置。否则，将它们作为常数考虑进去。如果你有50x50px的项目，你的最大“顶部”是450，最大“左侧”是750，所以乘以450和750，而不是500和800

您将这些值应用于CSS类，如果您将相同的类分配给每个项，则该类不会随机化它们，而是将它们放在相同的位置。您可能希望执行以下操作：

$(".t-shirt-design").each(function(e){
    // Generate random numbers
    e.css({
        'top' : randomTopPos,
        'left': randomLeftPos
    });
});


如果您的容器id为
container
，而您的可拖动id为
dragid
，则可以执行以下操作：

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
   });
});

<div id="tshirts-designs homepage">

更新：
更新了代码以容纳多个
。t恤设计
元素

更新2：
此外，html代码中有一个错误，html元素只能有一个id，容器html元素中有两个id，如下所示：

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
   });
});

<div id="tshirts-designs homepage">

对于这一个：

$(window).load(function() {

可拖拽物品的高度是多少？好的，我刚试过，但我所有的物品大小都不一样；）它的形象@Jurciukonis：我已经编辑了我的答案，它现在应该适用于不同的尺寸。我不知道，我做错了什么。这是我的链接：我粘贴了所有代码，更改了类，但是。。。它不工作：/所以你有几个“.t-shirt-design”元素，我更新了我的答案来处理这个问题，尝试新的代码。哦，谢谢，它几乎完美了，但我还需要一个corection；）一些元素，可以是第二个元素的上方，我的意思是，第一行第一个元素，在这个元素上，可以是第二行最后一项。顶部和左侧位置第二行可以是20或30 px litle，即现在（对不起，我的英语，我不知道，也许你能理解；））看到上面我的更新3，我再次更改代码，尝试新的。现在它正确了。谢谢你，尼尔森！！
$(window).load(function() {