如何从按钮移动父项 div

Question

这可能很容易做到，但我发现它令人沮丧，如何通过在按钮上按住 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。

Answer 1

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>

这是一个可行的解决方案。我评论了我更改的行。

如何从按钮移动父项 div

How to move a parent div from a button

html

javascript

mouse