CSS中的绝对定位元素

Question

我有一个.walldiv与其中的一些.toydiv s。我想安排toys inside the wall。 float:left属性已经为我做好了。

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

应用position:absolute，所有toy旨意来到wall覆的左上角和隐藏对方。

宽度和wall的高度是恒定的，但toy S的宽度和高度是可变的，也toy div的数目是动态的，如数量增加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。

Answer 1

我一个网站，正是这么做的（对不起，非英语的东西）的工作：

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 2

添加

position:relative 

至墙壁DIV

Answer 3

在该元素的绝对应定位，必须有风格的位置是：相对的。 （必须是目标元素的父级）

Answer 4

如果您只是使用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 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 */ 
} 

好运。