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

コンテナ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
   });
});

更新：いくつかの要素
に対応するようにコードを更新しました.t-shirt-design

更新2：
また、次のように、htmlコードにエラーがあります。html要素は1つのIDしか持てません。コンテナのhtml要素には2つあります。

<div id="tshirts-designs homepage">

1つだけに置き換えてください。正しいのは次のとおりです。

<div id="homepage">

更新3：
ページを見て、要件に合うようにコードを調整します（ドラッグ可能な要素の幅と高さが異なります）。代わりに更新コードを試してください。また、必要に応じて、window.loadイベントでこのコードを実行する方が適切です。 .readydivの高さと幅が正しいものになるようにロードする画像なので、次の行を置き換えます。

$(document).ready(function() {

これのために：

$(window).load(function() {
于 2012-10-08T18:16:28.987 に答える
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 に答える
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. 要素の幅と高さはどれくらいですか？それらが異なる場合は、指定されたオブジェクトの幅/高さに基づいて各位置を生成する必要がある場合があります。それ以外の場合は、定数として考慮します。50x50pxのアイテムがある場合、最大「上」は450、最大「左」は750なので、500と800ではなく450と750を掛けます。

  2. これらの値をCSSクラスに適用します。これは、すべてのアイテムに同じクラスを割り当てた場合、それらをランダム化するのではなく、同じ場所に配置します。次のようなことをしたいと思うかもしれません：

    $(".t-shirt-design").each(function(e){
    // Generate random numbers
    e.css({
        'top' : randomTopPos,
        'left': randomLeftPos
    });
});
于 2012-10-08T18:14:03.893 に答える