CSS中的绝对定位元素
我有一个.wall
div
与其中的一些.toy
div
s。我想安排toy
s inside the wall
。 float:left
属性已经为我做好了。CSS中的绝对定位元素
现在的问题是我想为toy
div添加position:absolute
,以便以后可以拖动它。我怎么能通过Javascript或通过CSS来做到这一点?
应用position:absolute
,所有toy
旨意来到wall
覆的左上角和隐藏对方。
宽度和wall
的高度是恒定的,但toy
S的宽度和高度是可变的,也toy
div的数目是动态的,如数量增加toy
s 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>
我一个网站,正是这么做的(对不起,非英语的东西)的工作:
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
这就是我真正想要的,如果你能给我看一些代码片段,那会很棒 – 2010-07-01 17:05:39
编辑帖子以包含Javascript部分 – 2010-07-06 00:09:28
现在这个例子的链接被破坏了。 – 2012-03-26 15:32:12
添加
position:relative
至墙壁DIV
否@ mabwi,添加'位置:相对'将呈现像这样http://goo.gl/Xdrn – 2010-06-28 16:24:47
在该元素的绝对应定位,必须有风格的位置是:相对的。 (必须是目标元素的父级)
请理解我'使用插件http://plugins.jquery.com/project/drag用于DnD,所以'玩具'divs必须设置'position:absolute' – 2010-06-28 16:27:21
如果您只是使用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
。任何被拖出位置的元素都会在流程中出现空隙,但我并没有看到任何简单的方法。
设置left,top和postion:绝对无效,请参阅这里的输出http://goo.gl/60r1 – 2010-06-29 04:53:41
你可以将代码发布到jsbin.com,以便我可以看到你的实现?我从截图中可以看到,它不起作用,不是为什么。 – jasongetsdown 2010-06-29 15:09:55
这里是代码http://jsbin.com/idixe/edit – 2010-07-01 09:26:43
集装箱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 */
}
好运。
这将安排所有的孩子元素从父母左侧10像素从父母顶部重叠0像素重叠在另一个顶部 – 2010-06-29 03:35:39
@Mithun P:是的,他们会的。我只是想说明我的例子。顺便说一句,我认为你的意思是“从父母的顶端10个像素”。 – 2010-06-29 14:42:09
的*** ***墙需要有相对位置,而不是玩具。下面似乎存在一个错误的交流。 * container *元素需要相对于绝对位置的位置来处理*内容*。你尝试过吗? – harpo 2010-06-28 17:25:04
是的,*墙*需要有位置相对和*玩具*需要有绝对位置 – 2010-06-29 03:31:16