ボタンから親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>

ここでワーキングソリューションです。私は変更した行についてコメントしました。