Ich habe eine Liste von div-Elementen, die ziehbare Elemente sind.

Ich muss tun, dass alle Elemente, ich werde zufällige obere und linke Positionen erzeugen, die in Reichweite meines Containers liegen, aber ich weiß nicht, wie es geht :)

Container div ist: width: 800px; Höhe: 500px;

Mein js ist jetzt wie:

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

$(".t-shirt-design").css({
    'top' : randomTopPos,
    'left': randomLeftPos
});
0
Lexys 8 Okt. 2012 im 22:02

3 Antworten

Beste Antwort

Wenn Ihre Container-ID container und Ihre ziehbare ID dragid lautet, können Sie wie folgt vorgehen:

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 : Der Code wurde aktualisiert, um mehrere .t-shirt-design Elemente aufzunehmen

UPDATE 2 :
Außerdem haben Sie einen Fehler in Ihrem HTML-Code. Ein HTML-Element kann nur EINE ID haben. Sie haben zwei in Ihrem Container-HTML-Element wie folgt:

<div id="tshirts-designs homepage">

Ersetzen Sie es durch nur eines, das Richtige wäre:

<div id="homepage">

UPDATE 3 :
Wenn ich Ihre Seite betrachte, passe ich meinen Code an Ihre Anforderungen an (Ihre ziehbaren Elemente haben unterschiedliche Breiten und Höhen). Probieren Sie stattdessen meinen Update-Code aus und führen Sie dies besser aus Code für das Ereignis window.load anstelle von .ready, da die Bilder geladen werden müssen, damit die Div-Höhen und -Breiten die richtigen sind. Ersetzen Sie daher Ihre folgende Zeile:

$(document).ready(function() {

Für dieses:

$(window).load(function() {
1
Nelson 8 Okt. 2012 im 18:46
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) 
});
0
Werner Kvalem Vesterås 8 Okt. 2012 im 18:11
$(".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
   });
});

Ersetzen Sie containerHeight und containerWidth durch ihre tatsächlichen Werte. Stellen Sie sicher, dass sich die Elemente im Container befinden und position:relative; haben.

0
JCOC611 8 Okt. 2012 im 18:15