Question

我正在尝试使用node.insertBefore将div元素从一个部分移动到另一个部分，并按字母顺序排序。点击（在这种情况下点击A）进行重新排序我遇到了重叠元素的问题，如下图所示：

Element overlap problem

我用来制作它的代码如下;对不起它有点长，但是如果把它复制到一个完整的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>

我做错了什么/奇怪吗？这可以修复/解决吗？在此先感谢您的帮助！

修改

我目前无法在任何其他浏览器中测试。
我注意到，一旦一个部分填满，当项目在各个部分之间移动时，突出显示不再重新调整。

编辑2：Jared发布的jsfiddle结果 jsfiddle example

Answer 1

现在回到这个问题了。如果其他人遇到此问题，我最终不得不用表替换div列表并重新排列表行。另一个选择可能是使用列表。

使用insertBefore发生IE8显示重叠

1 个答案: