javascript - div内的CSS绝对定位元素

我有一个.walldiv里面有一些.toydivs。我想安排toys inside the wall。float:left酒店为我做得很好。
现在的问题是我想为position:absolutediv添加toy，以便以后可以拖动它。如何通过Javascript或CSS来实现这一点？
应用position:absolute，所有toy都将到达wall的左上角并相互隐藏。
wall的宽度和高度是恒定的，但toys的宽度和高度是可变的，而且toydivs的数目是动态的，并且随着数目的增加toys need to arrange as rows。
任何建议都会有帮助，请注意我不能避免使用position:absolute进行拖动。

<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。

最佳答案

我正在一个网站上工作，正是这样（对不起，非英语的东西）：
http://moveit.canassa.com/cartao/4/
链接现已断开，但这里有一个jsFiddle，它显示了我所说的：
http://jsfiddle.net/canassa/Z9N3L/
“toy”div使用绝对位置：

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

“绝对位置”的问题是玩具将相对于页面而不是“墙”容器，要解决此问题，必须使墙容器相对：

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

溢出：隐藏也是我发现的一个很好的技巧。它使可拖动的对象进入墙容器的“下面”。
使用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

关于javascript - div内的CSS绝对定位元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3134123/