javascript - Javascript 可動 div - div の移動中に、マウスダウンがページ上の残りのテキストと相互作用しないようにする

Question

移動可能なdivを作成しようとしています。jQuery を使用した 1 つのライナーであることはわかっていますが、この 1 つの機能に 100k+ を追加したくありません。私が以下に持っているものは、divがページ上の残りのテキストを移動するとき、マウスがダウンしてその上をドラッグしているかのように機能することを除いて(もちろんそうです)、テキストはマウスとして強調表示または非強調表示になります動きます。これに対する比較的「簡単な」純粋なJavaScriptソリューションはありますか?

ところで:このコードのjnoreigaに感謝します。

window.onload = addListeners;

function addListeners(){
    document.getElementById('moveme').addEventListener('mousedown', mouseDown, false);
    window.addEventListener('mouseup', mouseUp, false);
}

function mouseUp()
{
    window.removeEventListener('mousemove', divMove, true);
}

function mouseDown(e){
  window.addEventListener('mousemove', divMove, true);
}

function divMove(e){
    var div = document.getElementById('moveme');
  div.style.position = 'absolute';
  div.style.top = e.clientY + 'px';
  div.style.left = e.clientX + 'px';
}

そして、いくつかのテストhtml

    <div id="moveme" style="width:100px; background-color:red">Test<br><br>Some more text</div>

    <div style="position:absolute; top:100px; left:50px;">
    <h1>Curriculum</h1>
    <ul>
      <li><a href="#">Math</a></li>
      <li><a href="#">Geometry</a></li>
      <li><a href="#">Physics</a></li>
    </ul>
    </div>