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

这样的东西？

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

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

JS：

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工作正常。但是，如果我没有一个bur几个div与几个移动按钮相关联，如何继续？

由于

点击按钮，javascript移动div

2 个答案: