Javascript IE8显示重叠使用insertBefore发生
我正在尝试使用node.insertBefore将div元素从一个部分移动到另一个部分,并按字母顺序排列插入顺序。单击(在本例中单击Javascript IE8显示重叠使用insertBefore发生,javascript,internet-explorer-8,Javascript,Internet Explorer 8,我正在尝试使用node.insertBefore将div元素从一个部分移动到另一个部分,并按字母顺序排列插入顺序。单击(在本例中单击A)以重新排序时,我遇到了元素重叠的问题,如下图所示: 我用来产生这个的代码如下;很抱歉,它有点长,但是如果你把它完整地复制到一个html文件中,你会很容易看到我的问题 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
A
)以重新排序时,我遇到了元素重叠的问题,如下图所示:
我用来产生这个的代码如下;很抱歉,它有点长,但是如果你把它完整地复制到一个html文件中,你会很容易看到我的问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var moveUp, moveDown;
var moveUp = function() {
var e = window.event.srcElement;
var firstBlock = document.getElementById('firstBlock');
var moved = false;
for (var i=0; i<firstBlock.childNodes.length; i++) {
if (firstBlock.childNodes[i].innerText > e.innerText) {
firstBlock.insertBefore(e, firstBlock.childNodes[i]);
moved = true;
break;
}
if (!moved) firstBlock.appendChild(e);
}
e.onclick = moveDown;
};
var moveDown = function() {
var e = window.event.srcElement;
var secondBlock = document.getElementById('secondBlock');
var moved = false;
for (var i=0; i<secondBlock.childNodes.length; i++) {
if (secondBlock.childNodes[i].innerText > e.innerText) {
secondBlock.insertBefore(e, secondBlock.childNodes[i]);
moved = true;
break;
}
if (!moved) secondBlock.appendChild(e);
}
e.onclick = moveUp;
};
</script>
<title>Test</title>
</head>
<body>
<div id="firstBlock" style="background-color:#dddddd;">
<div onclick="moveDown()">A</div>
<div onclick="moveDown()">B</div>
<div onclick="moveDown()">C</div>
<div onclick="moveDown()">D</div>
</div>
<div id="secondBlock">
<div onclick="moveUp()">E</div>
<div onclick="moveUp()">F</div>
<div onclick="moveUp()">G</div>
<div onclick="moveUp()">H</div>
</div>
</body>
</html>
var向上移动,向下移动;
var moveUp=函数(){
var e=window.event.src元素;
var firstBlock=document.getElementById('firstBlock');
var=false;
for(变量i=0;即innerText){
insertBefore(e,firstBlock.childNodes[i]);
移动=真;
打破
}
如果(!moved)firstBlock.appendChild(e);
}
e、 onclick=moveDown;
};
var moveDown=函数(){
var e=window.event.src元素;
var secondBlock=document.getElementById('secondBlock');
var=false;
for(变量i=0;即innerText){
secondBlock.insertBefore(e,secondBlock.childNodes[i]);
移动=真;
打破
}
如果(!moved)secondBlock.appendChild(e);
}
e、 onclick=moveUp;
};
试验
A.
B
C
D
E
F
G
H
我做错了什么事了吗?这个问题可以解决吗?提前感谢您的帮助
编辑:
- 我目前无法在任何其他浏览器中进行测试
- 我注意到,一旦一个部分填满,当项目在两个部分之间移动时,突出显示不再自动调整
现在正好回到这个问题上来。如果其他人有这个问题,我最终不得不用一个表替换
div
列表并重新排列表行。另一种选择可能是使用列表。现在正好回到这个问题上来。如果其他人有这个问题,我最终不得不用一个表替换div
列表并重新排列表行。另一种选择可能是使用列表。Demo:(来自问题中发布的内容)。至少在我的fiddle版本中,Firefox没有显示重叠,但在我们得出结论之前,你应该在IE中测试该小提琴。至少在IE9的兼容性/浏览器模式=IE8中,我没有看到重叠。注意,在上一个示例中,我没有使用,但它似乎没有什么区别。请提供您遇到的问题的工作演示;否则,不确定如何支持您的问题。@JaredFarrish-Chrome中也没有问题。在fiddle中,将框架下的第一个下拉列表更改为包装(头部),然后运行。它将起作用。演示:(从问题中发布的内容)至少在我的fiddle版本中,Firefox没有显示重叠,但在我们得出结论之前,你应该在IE中测试该fiddle。至少在IE9的兼容性/浏览器模式=IE8中,我没有看到重叠。注意,我在上一个示例中没有使用,但这似乎没有什么区别。请提供您遇到的问题的工作演示;否则,不确定如何支持您的问题。@JaredFarrish-Chrome中也没有问题。在fiddle中,将框架下的第一个下拉列表更改为包装(头部),然后运行。它会起作用的。