CSS absolute positioning elements inside a div

Question

I have a .wall div with a some .toy divs inside it. I want to arrange the toys inside the wall just like http://goo.gl/4MqM. float:left property has done it for me nicely.

Now the problem is I want to add position:absolute for the toy divs to make it draggable later. How can I do this either via Javascript or via CSS?

Applying position:absolute, all toys will come to the top left corner of the wall overlying and hiding each other.

The width and height of the wall is constant but the width and height of the toys is variable, also the number of toy' divs is dynamic and as the number increasestoy`s need to arrange as rows see http://goo.gl/za1u

Any suggessions will be helpful, please note the I can not avoid the use of position:absolute for dragging.

<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 JS Bin

Answer 1

Add

position:relative

To the wall div

Answer 2

the element in that the absolute should be positioned, must have the style position:relative. (must be a parent of the target element)

Answer 3

This would be a lot easier if you just used the jQueryUI .draggable(). It doesn't require the elements to be positioned.

If you're dead set on using this plugin, then you have the right idea. Let the elements flow into place and then calculate their position and set position: absolute and whatever the left and top end up being at runtime.

Set the .wall to be position: relative. Then:

var tPos;

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

The height of the .wall and the width of each .toy collapse when the toys are absolutely positioned but you can just add a few more lines to get/set their width and height in the above .each loops.

This obviously doesn't work if new toys can be added dynamically without a page reload as you suggest. To handle that you could switch them back to position: relative, add the new one, get the position of the new one in the flow, then set the position and switch back to position: absolute. Any elements that had been dragged out of place would be gaps in the flow, but I don't see any easy way around that.

Answer 4

The container div for every .toy must have position:relative set. That way, the position 0 for its children elements becomes its top left corner. Like this:

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

And:

.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 */
}

Good luck.

Answer 5

I am working on a website that does exactly that (sorry for the non-english stuff):

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

The "toy" div is using a position absolute:

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

The problem with the position absolute is that the toy will be relative to page and not the "wall" container, in order to fix that you must make the wall container relative:

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

The overflow:hidden is also a nice trick that I found. It makes the draggable objects go "under" the wall container.

There is no big secret to make it draggable, using 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