我注意到,当我将一个相对元素附加到另一个元素时,某些东西会发生变化,而后续元素总是添加到前一个元素的右边,因此似乎在附加过程中的某个时候左值发生了变化,但我不能弄清楚哪一个?
一个小例子是将5个跨度添加到div并将它们全部放在left:10和top:10上
为了使它们相互重叠,您必须从左侧取值添加的项目数量。即,一旦您添加了5个项目,则该项目的左侧为10-5 * 10
还有其他方法可以找出附加项目的左值应该是什么,以便它位于前一个值的顶部吗?
这是一些代码示例和jsfiddle link
HTML
<div id="container"></div>
<span id="el" class="drag"></span>
Java脚本
for(var i=0;i<5;i++)
{
var element=$('#el').clone();
$(element).html(i);
$(element).attr("id","el"+i);
$('#container').append(element);
$(element).css({
left: 10,
top: 10,
position: 'relative',
marginRight: 0
});
}
$('.drag').draggable();
更新:
我并不是在寻找“修复”,因为我想让它工作,所以我想知道一旦添加或删除了相对元素,元素中是否存在值更改
最佳答案
我不是在寻找“修复”,而是要它正常工作
知道一次相对值后元素中是否存在值变化
元素被追加或删除
如果您要添加另一个元素,则元素中的css不会更改。您看到的行为是由浏览器按照您要求的那样适合元素而引起的。由于'左:10;前10名;'已被占用,它会尝试将其安装在附近。也就是说,没有什么可以阻止您计算某个元素包含的元素数量。 ($('#container').children().length
)或页面上元素的偏移量(实际位置; $('#el4').offset().left
或$('#container .drag:last-child').offset().left
)。因为相对元素始终将自己相对于其他元素定位,所以这很有可能对您没有太大帮助。
要使它们彼此重叠,您需要花费
从左侧值添加的项目。即,一旦您添加5个项目,
下一项的左侧为10-5 * 10
还有其他方法可以找出
附加项目应该是这样,以便它在前一个项目之上?
如果希望元素实际堆叠,则可能需要更改代码,以使其正确地彼此相邻显示,然后使用margin-left
将左边框移到元素中,以便彼此重叠显示。 .draggable()
将从此处计算位置,只要在使元素可拖动之后不更改DOM,就可以了。
jsfiddle示例:http://jsfiddle.net/LmW8T/2/
for(var i=0;i<80;i++)
{
var element=$('#el').clone();
$(element).html(i);
$(element).attr("id","el"+i);
//$element.addClass('element');
$('#container').append(element);
}
$('#el').remove();
$('.drag').draggable();
使用CSS:
.drag {
width: 40px;
height: 40px;
border: 1px dotted blue;
background: #FEEFEF;
display: block;
float: left;
margin-left: -25px;
}
#container {
padding-left: 25px;
width: 200px;
}
关于javascript - 附加相对元素时会有什么变化?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21937629/