1

node.insertBeforeを使用して、div要素をあるセクションから別のセクションに移動しようとしています。挿入をアルファベット順に並べます。クリック（この場合はクリック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>

私は何か間違った/奇妙なことをしていますか？これは修正/回避できますか？よろしくお願いします！

編集：

  • 現在、他のブラウザでテストすることはできません。
  • 1つのセクションがいっぱいになると、アイテムがセクション間を移動するときにハイライトが再調整されなくなることに気付きました。

編集2：Jaredによって投稿されたjsfiddleの結果 jsfiddleの例

4

1 に答える 1

1

今、この質問に戻ってきました。他の誰かがこの問題を抱えている場合は、divリストをテーブルに置き換えて、テーブルの行を再配置する必要がありました。別のオプションは、リストを使用することです。

于 2013-07-03T23:29:46.840 に答える