0

我正在尝试制作一个可移动的 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>
4

1 回答 1

0

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

于 2013-10-17T01:21:14.423 回答