Перемещение div при нажатии на кнопку, javascript

Question

У меня есть изображение, отображаемое в div. Я хотел бы сделать это, нажав на кнопку в том же div. Мне нужна эта кнопка, потому что щелчок по изображению позволяет сделать это перемещение внутри div, и я хочу, чтобы что-то еще делало div.

Здесь в HTML части:

<div id="jsmolwindow1" style="display:none;"> 
<script type="text/javascript"> 
jmolApplet1 = Jmol.getApplet("jmolApplet1", Info); 
</script> 
<img class="smallButtonidle" id="move" src="ketcher/png/action/arrow.png" style="opacity: 0.8; width=20px height=10px bottom: 20px; right: 20px; float: right;"/> 
</div> 

А вот в яваскрипта части:

document.getElementById('move').addEventListener('mousedown', function(e) { 
    isDown = true; 
    offset = [div.offsetLeft - e.clientX, 
     div.offsetTop - e.clientY]; 
}, true); 

document.getElementById('move').addEventListener('mouseup', function() { 
    isDown = false; 
}, true); 

document.getElementById('move').addEventListener('mousemove', function(event) { 
    event.preventDefault(); 
    if (isDown) { 
     mousePosition = { 
      x : event.clientX, 
      y : event.clientY 
     }; 
     div.style.left = (mousePosition.x + offset[0]) + 'px'; 
     div.style.top = (mousePosition.y + offset[1]) + 'px'; 
    } 
}, true); 

Это своего рода работает, но он ведет себя странно. Когда я нажимаю кнопку «Переместить», я могу переместить div, если моя мышь остается на изображении на кнопке, но это довольно сложно, и когда моя мышь выходит из этой кнопки, она ведет себя странно. Я бы хотел, чтобы изображение двигалось до тех пор, пока мышь нажата на кнопку «move». Когда пользователь освободит его, я бы хотел, чтобы он переставал быть активным.

Надеюсь, этот вопрос не слишком грязный, спасибо за вашу помощь!

Answer 1

Что-то вроде этого?

Когда зеленая область перетащилась, она переместит синий квадрат.

<script type="text/javascript"> 
</script> 
<div id='move' style='background-color: blue; width:10px; height:10px; top: 100px; left:100px; position:absolute;'></div> 
<div id='touchpad' style='background-color: green; width:400px; height:300px; bottom: 0px; right:0px; position:absolute;'></div> 
<script> 
var isDown = false; 
var div = document.getElementById('move'); 
var touchpad = document.getElementById('touchpad'); 
touchpad.addEventListener('mousedown', function(e) { 
    isDown = true; 
    offset = [div.offsetLeft - e.clientX, 
     div.offsetTop - e.clientY]; 
}, true); 
window.addEventListener('mouseup', function() { 
    isDown = false; 
}, true); 
window.addEventListener('mousemove', function(event) { 
    event.preventDefault(); 
    if (isDown) { 
     mousePosition = { 
      x : event.clientX, 
      y : event.clientY 
     }; 
     div.style.left = (mousePosition.x + offset[0]) + 'px'; 
     div.style.top = (mousePosition.y + offset[1]) + 'px'; 
    } 
}, true); 
</script> 

Answer 2

Для правильной работы я изменил две вещи: кнопку и js. Вот как сейчас: HTML:

<div id="jsmolwindow1" style="display:none;"> 
<script type="text/javascript"> 
jmolApplet1 = Jmol.getApplet("jmolApplet1", Info); 
</script> 
<input id="move" class="smallButtonidle" type="button" value="M" style="bottom: 10px; right: 10px; float: right;"/> 
</div> 

ЯШ:

document.getElementById('move').addEventListener('mousedown', function(e) { 
    isDown = true; 
    offset = [div.offsetLeft - e.clientX, 
     div.offsetTop - e.clientY]; 
}, true); 

document.getElementById('move').addEventListener('mouseup', function() { 
    isDown = false; 
}, true); 

document.addEventListener('mousemove', function(event) { 
    event.preventDefault(); 
    if (isDown) { 
     mousePosition = { 
      x : event.clientX, 
      y : event.clientY 
     }; 
     div.style.left = (mousePosition.x + offset[0]) + 'px'; 
     div.style.top = (mousePosition.y + offset[1]) + 'px'; 
    } 
}, true); 

Ir работает отлично. Но как действовать, если у меня нет одного бора, чтобы связать несколько кнопок перемещения?

Thanks