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