javascript - 点击按钮移动一个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>

这里是 javascript 部分:

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，但这有点困难，当我的鼠标移出此按钮时，它的行为很奇怪。我想要的是，只要在“移动”按钮上按下鼠标，图像就会移动。当用户释放它时，我希望它停止事件。

我希望这个问题不会太乱，谢谢你的帮助!

Answer 1

是这样的吗？

拖动绿色区域时，会移动蓝色方 block 。

<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>