这可能很容易做到,但我发现它令人沮丧,如何通过按住按钮上的 mousedown 来移动整个 div?
var m = document.getElementById('aboutpanel');
m.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
function mouseUp() {
window.removeEventListener('mousemove', move, true);
}
function mouseDown(e) {
window.addEventListener('mousemove', move, true);
}
function move(e) {
m.style.top = e.clientY + 'px';
m.style.left = e.clientX + 'px';
};
#aboutpanel{
width: 200px;
height: 150px;
position: fixed;
}
<div id="aboutpanel">
<input id="exit_about" type="button" onclick="ignore_about()" value="X">
<input id="mini_about" type="button" onclick="shrink_about()" value="_">
<input id="title_about" type="button" onclick="" value="About">
<p>Desklogger OS</p>
<p>Version: v3.0a</p>
<p>Credits: Lèla Null</p>
</div>
我希望仅在按下“关于”按钮时才能移动 div。
最佳答案
function about() {
document.getElementById('aboutpanel').style.display = 'block';
document.getElementById('settings').style.display = 'none';
document.getElementById('about_appstatus').src = 'data/green-dot.png';
start2();
}
function ignore_about() {
document.getElementById('aboutpanel').style.display = 'none';
document.getElementById('about_appstatus').src = 'data/red-dot.png';
}
var m = document.getElementById('title_about'); // Changed
m.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
function mouseUp() {
window.removeEventListener('mousemove', move, true);
}
function mouseDown(e) {
window.addEventListener('mousemove', move, true);
}
function move(e) {
document.getElementById('aboutpanel').style.top = e.clientY + 'px'; // Changed
document.getElementById('aboutpanel').style.left = e.clientX + 'px'; // Changed
}
#aboutpanel
{
width: 200px;
height: 150px;
position: fixed;
}
<div id="aboutpanel">
<input id="exit_about" type="button" onclick="ignore_about()" value="X">
<input id="mini_about" type="button" onclick="shrink_about()" value="_">
<input id="title_about" type="button" onclick="" value="About">
<p>Desklogger OS</p>
<p>Version: v3.0a</p>
<p>Credits: Lèla Null</p>
</div>
这是一个可行的解决方案。我评论了我更改的行。
关于javascript - 如何从按钮移动父级 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40199397/