I have a .wall div with a some .toy divs inside it. I want to arrange the toys inside the wall. 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 e 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 increases toys need to arrange as rows.

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 at JSBin.

I have a .wall div with a some .toy divs inside it. I want to arrange the toys inside the wall. 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 e 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 increases toys need to arrange as rows.

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 at JSBin.

• javascript
• jquery
• html
• css

• The wall needs to have position relative, not the toys. There seems to be a mismunication below. The container element needs position relative for position absolute to work on the contents. Have you tried that? – harpo Commented Jun 28, 2010 at 17:25
• Yes, wall need to have position relative and the toys need to have position absolute – Mithun Sreedharan Commented Jun 29, 2010 at 3:31

5 Answers 5

Add

position:relative

To the wall div

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

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

The link is now broken but here is a jsFiddle that shows what I am talking about:

http://jsfiddle/canassa/Z9N3L/

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

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.

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

The container div for every .toy must have position:relative set. That way, the position 0 for its children elements bees 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.