0

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

我需要做的是，所有元素，我将生成随机的顶部和左侧位置，这将在我的容器范围内，但我不知道该怎么做:)

容器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
});
4

4 回答 4

1

鉴于您的容器 idcontainer和您的可拖动 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
   });
});

更新：
更新了代码以容纳几个.t-shirt-design元素

更新2：
你的html代码也有错误，一个html元素只能有一个id，你的容器html元素中有两个，如下：

<div id="tshirts-designs homepage">

只替换一个，正确的是：

<div id="homepage">

更新3：
查看您的页面，我调整了我的代码以更好地满足您的要求（您的可拖动元素具有不同的宽度和高度），因此请尝试我的更新代码，也可以更好地在window.load事件上执行此代码，而不是.ready，因为我们需要要加载的图像，因此 div 的高度和宽度是正确的，因此请替换以下行：

$(document).ready(function() {

对于这个：

$(window).load(function() {
于 2012-10-08T18:16:28.987 回答
0 
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) 
});
于 2012-10-08T18:11:10.313 回答
0

看起来你在正确的道路上......

Math.random()正在生成 0 到 1 之间的数字。

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

然后将这些值分配为顶部/左侧位置。

一些考虑：

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

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

    $(".t-shirt-design").each(function(e){
    // Generate random numbers
    e.css({
        'top' : randomTopPos,
        'left': randomLeftPos
    });
});
于 2012-10-08T18:14:03.893 回答
0 
$(".t-shirt-design").each(function(){
   var $t = $(this);
   var randomTopPos = Math.floor(Math.random() * (containerHeight-$t.width()));
   var randomLeftPos = Math.floor(Math.random() * (containerWidth-$t.height()));
   $t.css({
      'top': randomTopPos,
      'left':randomLeftPos
   });
});

用它们的真实值替换containerHeight和。containerWidth确保物品在容器内并且有position:relative;

于 2012-10-08T18:09:10.377 回答