隨機左，頂部位置，jquery，javascript

我有一個div元素的列表，這是可拖動的項目。隨機左，頂部位置，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 
});

來源

2012-10-08 Jurciukonis

什麼是可拖動項目的高度？ – Nelson

鑑於比你的容器的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 
    }); 
});

UPDATE：
更新了代碼以容納幾個.t-shirt-design元素

更新2：
你也有你的HTML代碼中的錯誤，一個HTML元素只能有一個ID，你在你的容器html元素有兩個，具體如下：

<div id="tshirts-designs homepage">

代替它只是一個，正確的是：

<div id="homepage">

更新3：
在你的頁面來看，我調整我的代碼，以更好地滿足您的要求（您可拖動的元素具有不同的寬度和高度），所以儘量我更新的代碼代替，最好在上執行此代碼事件，而不是.ready，因爲我們需要加載的圖像，以便在div高度和寬度是正確的，所以更換你的下面一行：

$(document).ready(function() {

這一個：

$(window).load(function() {

來源

2012-10-08 18:16:28 Nelson

我不知道，我做錯了什麼。這裏是我的鏈接：http://jurciukonis.lt/wordpress/T-Land/我粘貼所有的代碼，改變class'es，但是...它不工作：/ – Jurciukonis

所以你有幾個「.t恤衫，設計「元素，我更新了處理該問題的答案，嘗試新的代碼。 – Nelson

哦，謝謝，它幾乎完美，但我需要1個更多的核心;）一些元素，可以超過第二個元素，我的意思是，第一個元素，第一行，這個元素，可以是第二行最後一項。頂部和左側位置第二行可以是20或30像素，現在是（對不起，我的英文，我不知道，梅比你明白;）） – Jurciukonis

$(".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-08 18:09:10 JCOC611

Okey，我剛剛嘗試過，但我的所有項目是不同的大小;）它的圖像？;） – Jurciukonis

給我一秒我會編輯我的答案，然後。 – JCOC611

@Jurciukonis：我編輯了我的答案，它現在應該適用於不同的尺寸。 – JCOC611

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-08 18:11:10

看起來你是在正確的道路上......

Math.random()是0和1

你乘之間產生數這些數字取決於您想要的範圍，將範圍更改爲0範圍。

然後，您將這些值分配爲頂部/左側位置。

一些注意事項：

哪些元素的寬度和高度？如果它們有所不同，則可能需要根據給定對象的寬度/高度生成每個位置。否則，把它們作爲一個常數。如果你有50x50像素的物品，你的最大'頂部'是450，最大'左'是750，所以乘以450和750而不是500和800.
你正在將這些值應用到CSS類，如果您將相同的課程分配給每個項目，則不會將它們隨機化，而是將它們放在同一個地方。你不妨這樣做：
```
$(".t-shirt-design").each(function(e){ 
    // Generate random numbers 
    e.css({ 
     'top' : randomTopPos, 
     'left': randomLeftPos 
    }); 
}); 
```

來源

2012-10-08 18:14:03 cjc343

隨機左，頂部位置，jquery，javascript

回答

相關問題