Question

我正在尝试制作一个可移动的div。我知道它是一个带有jQuery的单行，但我不想为这一个功能添加100k +。我在下面的工作除了当div移动页面上的其余文本时，就好像鼠标向下并拖动它（当然是这样），因此文本突出显示或不突出显示为鼠标移动。是否有相对“简单”的纯JavaScript解决方案？

BTW：感谢此代码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

我能够找到代码here，它向我展示了如何使其工作。问题似乎是将OnMouseDown设置为要移动的div。如果将OnMouseDown设置为window，则可以克服突出显示（教程显示如何）。我不得不修改显示的代码来搜索树以找到被点击的父div（例如，如果div中的元素正在使用mousedown而不是div本身。）

Javascript可移动div - 当div移动时，保持mousedown不与页面上的其余文本交互

1 个答案: