Lèla Null Lèla Null - 1 month ago 8
HTML Question

How to move a parent div from a button

This probably very easy to do but I'm finding it frustrating, how can I move an entire div by holding mousedown on a button?




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>





I want to be able to move the div only when the About button is pressed.

Answer

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>

Here's a working solution. I commented the lines I changed.

Comments