Éléments de positionnement absolus CSS à l'intérieur d'un div

Question

J'ai un .walldiv avec un div s à l'intérieur. Je veux organiser le toys inside the wall. float:left propriété a fait pour moi bien.

Maintenant, le problème est que je veux ajouter position:absolute pour les div toy pour le rendre plus tard dragable. Comment puis-je le faire soit par Javascript, soit par CSS?

En appliquant position:absolute, tous les toy s viendront dans le coin supérieur gauche du wall se recouvrant et se cachant mutuellement.

La largeur et la hauteur du wall est constante, mais la largeur et la hauteur des toy s est variable, aussi le nombre de toy divs est dynamique et que le nombre augmente toys need to arrange as rows.

Toutes les suggestions seront utiles, s'il vous plaît noter que je ne peux pas éviter l'utilisation de position:absolute pour faire glisser.

<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<style> 
    body{ 
    text-align:center; 
    } 
.clearfix{ 
    clear:both; 
} 
    .wall { 
    border: 5px solid #cde; 
    margin:auto; 
    width:200px; 
    padding:10px; 
    } 
.toy{ 
    background-color: #BBCCEE; 
    border:1px solid #8899BB; 
    margin:5px; 
    width: auto; 
    padding:5px; 
    float:left; 
} 
.tall{ 
    padding-top:10px; 
} 
</style> 
<script> 
    $(document).ready(function() { 
    $('.toy').each(function(index) { 
    var position = $(this).offset(); 
    var prevPosition = $(this).prev().offset(); 
    $(this).css({ 
    //top: position.top, 
    //left:position.left, 
    //position:'absolute', 
    }); 
    }); 
}); 
</script> 
<div class='wall'> 
<div class='toy'>T1</div> 
<div class='toy'>T2</div> 
<div class='toy'>T3333333</div> 
<div class='toy'>T4</div> 
<div class='toy'>T5</div> 
<div class='toy tall'>T6</div> 
<div class='toy'>T7</div> 
<div class='toy'>T8</div> 
<div class='clearfix'></div> 
</div> 

Here is the code at JSBin.

Answer 1

Je travaille sur un site Web qui fait exactement cela (désolé pour les choses non-anglais):

http://moveit.canassa.com/cartao/4/

Le lien est maintenant cassé, mais voici une jsFiddle qui montre ce que je suis parler de:

http://jsfiddle.net/canassa/Z9N3L/

Le div "jouet" avec une position absolue:

.toy{ 
    width: 100px; 
    height: 25px; 
    position: absolute; 
    z-index: 0; 
} 

Le problème avec la position absolue est que le jouet sera par rapport à la page et non le contenant « mur », afin de résoudre ce problème, vous devez faire le récipient de paroi par rapport:

#wall{ 
    position: relative; 
    overflow: hidden; 
} 

Le trop-plein : caché est aussi un joli tour que j'ai trouvé. Il fait passer les objets déplaçables "sous" le conteneur mural.

Il n'y a pas grand secret pour le rendre draggable, en utilisant jQuery:

// Creates a toy div inside the wall 
$(MV.wallId).append('<div class="toy" id="' + this.getId() + '"></div>'); 

box = this.getBox(); // return the "toy" that I've just created. 
$('#' + this.getId()).draggable(); // make it draggable 

Answer 2

Ajouter

position:relative 

au mur div

Answer 3

l'élément qui doit être positionné l'absolu, doit avoir la position de style: relative. (doit être un parent de l'élément cible)

Answer 4

Cela serait beaucoup plus facile si vous venez d'utiliser jQueryUI .draggable(). Il ne nécessite pas les éléments à positionner.

Si vous êtes décidé à utiliser ce plugin, alors vous avez la bonne idée. Laisser les éléments couler en place, puis calculer leur position et définir position: absolute et quels que soient les left et top finissent par être au moment de l'exécution.

Définissez .wall sur position: relative. Puis:

var tPos; 

$('.toy').each(function(index) { 
    tPos = $(this).position(); 
    $(this).css({ 
     left: tPos.left, 
     top: tPos.top 
    }); 
}; 
$('.toy').css({ 
    position: absolute 
}); 

La hauteur de la .wall et la largeur de chaque effondrement .toy lorsque les jouets sont absolument positionnés mais vous pouvez simplement ajouter quelques lignes pour obtenir/définir leur largeur et la hauteur dans les .each ci-dessus boucles.

Cela ne fonctionne évidemment pas si de nouveaux jouets peuvent être ajoutés dynamiquement sans rechargement de page comme vous le suggérez. Pour gérer cela, vous pouvez les remettre à position: relative, ajouter le nouveau, obtenir la position du nouveau dans le flux, puis définir la position et revenir à position: absolute. Tous les éléments qui ont été traînés hors du lieu seraient des lacunes dans le flux, mais je ne vois pas de moyen facile de contourner cela.

Answer 5

Le conteneur div doit contenir position:relative pour chaque .toy. De cette façon, la position 0 pour ses éléments enfants devient son coin supérieur gauche.Comme ceci:

<div class="parent"> 
    <div class="child">Blah.</div> 
    <div class="child">Blah.</div> 
</div> 

Et:

.parent { 
    position: relative; 
} 
.child { 
    position: absolute; 
    left: 10px; /* This is 10 pixels from the parents left side */ 
    top: 10px; /* This is 10 pixels from the parents top side */ 
} 

Bonne chance.