div内的CSS绝对定位元素

Question

我有一个.wall div有一些.toy div里面秒。 我想把toy放在wall 。 float:left属性对我来说很好。

现在的问题是我要为toy div添加position:absolute ，以使其稍后可拖动。 如何通过JavaScript或CSS做到这一点？

应用position:absolute ，所有toy都将落在wall左上角，彼此重叠并隐藏。

wall的宽度和高度是恒定的，但是toy的宽度和高度是可变的， toy div的数量也是动态的，并且随着数量的增加， toy需要按行排列 。

任何建议都将有所帮助，请注意，我无法避免使用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>

这是JSBin的代码 。

Answer 1

加

position:relative

到墙div

Answer 2

我正在一个完全做到这一点的网站上（对那些非英语的东西很抱歉）：

\n

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

链接现在断开了，但是这里是一个jsFiddle，它显示了我在说什么：

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

“玩具” div使用绝对位置：

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

绝对位置的问题是玩具将相对于页面而不是相对于“壁”容器，以便修复必须使壁容器相对的问题：

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

我发现的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

Answer 3

如果您只使用jQueryUI .draggable()这会容易得多。 它不需要定位元素。

如果您对使用此插件一无所知，那么您有正确的主意。 让要素流入的地方，然后计算它们的位置和设置position: absolute和任何的left和top最终被在运行时。

将.wall设置为position: relative 。 然后：

var tPos;

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

在高度.wall以及各自的宽度.toy在上面崩溃时的玩具是绝对定位的，但你可以只需添加几行获取/设置它们的宽度和高度.each循环。

如果可以动态添加新玩具而没有按照您的建议重新加载页面，则这显然不起作用。 为了解决这个问题，您可以将它们切换回position: relative ，添加新的，在流中获取新的位置，然后设置位置并将其切换回position: absolute 。 任何被拖到适当位置的元素都将是流程中的空白，但是我看不出有任何简单的方法可以解决此问题。

Answer 4

绝对位置中的元素必须具有position：relative样式。 （必须是目标元素的父元素）

Answer 5

每个.toy的容器div必须具有position:relative设置。 这样，其子元素的位置0变为其左上角。 像这样：

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

和：

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

祝好运。