Javascript可移動div-在div移動時防止mousedown與頁面上其余文本的交互

Question

我正在嘗試制作一個可移動的div。 我知道這是jQuery的一個襯板，但我不想為此功能添加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>

Answer 1

我在這里可以找到向我展示如何使其工作的代碼。 問題似乎在於將OnMouseDown設置為要移動的div。 如果將OnMouseDown設置為window，則可以克服突出顯示（本教程顯示了方法）。 我必須修改顯示的代碼以搜索樹以找到被單擊的父div（例如，如果div中的某個元素正在將mousedown而不是div本身占用）。