La détection div collision?

Je vais vous donner une réponse théorique:

Vous souhaitez calculer votre div à l'limites -- obtenir votre x,y du coin de valeurs et de voir si une autre div limites de croiser vos autres div valeurs. Si il y a une intersection de coordonnées, alors vous avez vous-même une collision.

Comment obtenir les coordonnées de l'emplacement:

Top: $("#div").offset().top
Left: $("#div").offset().left
Bottom: $("#div").offset().top + $("#div").height()
Right: $("#div").offset().left + $("#div").width()

OriginalL'auteur Atticus

function collision($div1, $div2) {
var x1 = $div1.offset().left;
var y1 = $div1.offset().top;
var x2 = $div2.offset().left;
var y2 = $div2.offset().top;
if ((y1 + $div1.outerHeight(true)) < y2 ||
y1 > (y2 + $div2.outerHeight(true)) ||
(x1 + $div1.outerWidth(true)) < x2  ||
x1 > (x2 + $div2.outerWidth(true)))
return false;
return true;
}

Essayer ce?

OriginalL'auteur

J'ai peut-être la lecture de quelque chose de mal, mais certains de ces exemples semblent erronées, ou pas assez instructif. Lors de la vérification de collision, vous ne pouvez pas il suffit de cocher un côté, parce que vous êtes à découper un plan entier. Vous aussi vous ne pouvez pas il suffit de cocher une div, parce que celui que vous essayez de place peut engloutir le div, et vous pourriez avoir besoin de vérifier que la collision.

J'ai été de tenter de détection de collision sur les images, mais il peut facilement être converti pour les divs. J'ai inclus toutes les fonctions qui s'y rapportent. Mon objectif était d'être en mesure de placer une div n'importe où je veux sur la page, et aléatoire des images, ainsi que leur placement, sans affecter de toute autre chose sur la page. Évidemment, si vous souhaitez utiliser cette fonction, vous devez changer les noms des images à vos images avec vos propres chemins.

Aussi, si vous utilisez cette fonction avec beaucoup d'images, ou dans un espace restreint, ou tout simplement veulent un failsafe, un compteur peut être ajouté à la while boucle, ce qui serait utilisée pour briser la boucle si un certain nombre n'a jamais été atteint. Cela permettrait d'éviter la page de verrouillage vers le haut si c'était d'avoir des problèmes à trouver un endroit pour tout.

J'espère que quelqu'un qui se retrouve ici, comme je l'ai fait, peut l'utiliser.

CSS

#imageHolder {
z-index: -1;
background-color:red;
height: 700px;
width: 200px;
position: absolute;
top: 3px;
}
.preloadedImage {
display: none;    
}
.loadedImage {
display: normal;
position: absolute;
z-index: -1; /* Can be removed. Places the Images underneath everything on the page.
}

Fonction retourne un nombre aléatoire

function Random_Number(maxNumber) {
rndNumber = Math.floor(Math.random() * maxNumber);
return rndNumber;    
}

Fonction renvoie une position aléatoire

//Params provide size of the image and which element to use for measurements. 
//Don't want a left position to be against the edge, otherwise it will
//flow passed the div. However, if you want to achieve this look, just pass in 0,0 or remove them. 
function Random_Position(elem, imgHeight, imgWidth) {
var top = Math.floor(Math.random() * ($(elem).height() - imgHeight));
var left = Math.floor(Math.random() * ($(elem).width() - imgWidth));    
var pos = [top, left];    
return pos;
}

Fonction Principale

function Randomize_Images(elem, numOfImgs, imgNameArr) {
var imgIDs = [];
var collision;
var rndImgPos; //needs to be declared outside of loops so it can access outside of loops.
for (var z = 0; z < numOfImgs; z++) {
imgIDs.push("rndImg" + $(elem).attr("id") + z);
}
//Main loop - each iterations places a random image inside the div free of collision
for (var i = 0; i < numOfImgs; i++) {
//Create the image and hide it until its position has been set.
$(elem).append($("<img />", {
src: "libs/images/random_images/" + imgNameArr[Random_Number(imgNameArr.length)] + ".png",
id: imgIDs[i],
class: "preloadedImage"
}));
collision = true;
//Collision loop. Will not exit unless its forced, or finds a free a spot.
while (collision) {
//the image that will be added.
var curImg = $("#" + imgIDs[i]);
rndImgPos = Random_Position(elem, curImg.height(), curImg.width());            
var imgTop = rndImgPos[0];
var imgBot = rndImgPos[0] + curImg.height();
var imgLeft = rndImgPos[1];
var imgRight = rndImgPos[1] + curImg.width();
//no reason to check for collision with the first image.
if (i >= 1) {
//Image loop. Will loop through all images previously placed, and check for collision.
for (var x = 0; x < i; x++) {
var setImg = $("#" + imgIDs[x]);
var setImgPos = setImg.position();
var setTop = setImgPos.top;
var setBot = setImgPos.top + setImg.height();
var setLeft = setImgPos.left;
var setRight = setImgPos.left + setImg.width();
if (((imgLeft < setLeft && imgRight > setLeft) || (imgLeft < setRight && imgRight > setRight)) && ((imgTop < setTop && imgBot > setTop) || (imgTop < setBot && imgBot > setBot))) {
collision = true;
break;
}
else if (((setLeft < imgLeft && setRight > imgLeft) || (setLeft < imgRight && setRight > imgRight)) && ((setTop < imgTop && setBot > imgTop) || (setTop < imgBot && setBot > imgBot))) {
collision = true;
break;
}
else {
collision = false;
}
}
}
else {
collision = false;
}
}
//Set the coordinates for the new image, and assign it's permanent class.
var curImg = $("#" + imgIDs[i]);       
$(curImg).css("top", rndImgPos[0]);
$(curImg).css("left", rndImgPos[1]);        
curImg.removeClass("preloadedImage");
curImg.addClass("loadedImage");         
}    
}

Exemple de l'appeler

//I am calling the function here after window load, with an additional 2 second pause because I have a Datatable loading, and it adds to the height of the page. For this particular call, I want the div to be the length of the entire page. You don't need anything but the function call otherwise.
$(window).on("load", function(){
setTimeout(function(){
var imgNames = ["bullethole1", "bullethole2", "bullethole3", "bullethole4", "bullethole5", "bullethole6"];
$("#imageHolder").height($(document).height());
Randomize_Images($("#imageHolder"), 20, imgNames);          
},2000);
});

OriginalL'auteur user2592690