Блог

Главная - Вопросы по программированию - Как переместить родительский div из кнопки

Как переместить родительский div из кнопки

#javascript #html #mouse

#javascript #HTML #мышь

Вопрос:

Это, вероятно, очень легко сделать, но я нахожу это разочаровывающим, как я могу переместить весь 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 только при нажатии кнопки About.

Комментарии:

1. —> jsfiddle.net/p1h7ejvz Это работает. В чем проблема?

2. Это очень близко к тому, что мне нужно, да, но оно также перемещается независимо от того, где я нажимаю на div. В конце я хочу иметь пару форм, которые можно перемещать, но только с помощью кнопки для перемещения.

Ответ №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>

Вот рабочее решение. Я прокомментировал строки, которые я изменил.

Комментарии:

1. Хм, это работает здесь, но не в основном проекте. Странно, но я боюсь, что это может быть моей проблемой сейчас. Спасибо за помощь.

2. что-то в этой строке m.addEventListener('mousedown', mouseDown, false); несовместимо. Есть быстрые идеи?