Question

我有一个.wall div，里面有一些.toy div个。我想安排toys inside the wall。 float:left财产很适合我。

现在问题是我想为position:absolute div添加toy以使其稍后可拖动。我怎么能通过Javascript或CSS来做到这一点？

应用position:absolute，所有toy都会在wall的左上角覆盖并相互隐藏。

wall的宽度和高度是常量，但toy的宽度和高度是可变的，toy div的数量也是动态的，随着数量的增加{ {3}}

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

toys need to arrange as rows

Answer 1

添加

position:relative

到墙上的div

Answer 2

~~我正在建立一个完全正确的网站（抱歉非英语的东西）：~~

<击> 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; }

溢出：隐藏也是我发现的一个很好的技巧。它使可拖动的对象位于墙上容器的“下面”。

使用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的宽度会崩溃，但您可以在上面添加更多的线来获取/设置它们的宽度和高度{ {1}}循环。

如果没有按照您的建议重新加载页面，可以动态添加新玩具，这显然不起作用。要处理它，你可以将它们切换回.each，添加新的，在流程中获取新的位置，然后设置位置并切换回position: relative。任何被拖出的元素都会在流程中出现空白，但我认为没有任何简单的方法。

Answer 4

绝对应该定位的元素，必须具有样式位置：relative。（必须是目标元素的父级）

Answer 5

每个div的容器.toy必须设置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 */
}

祝你好运。

div中的CSS绝对定位元素

5 个答案: