时间戳

首页 > 解决方案 > 使用箭头键在另一个 div 中移动一个 div

javascript - 使用箭头键在另一个 div 中移动一个 div

问题描述

我是 JavaScript 新手，所以我遇到了一些困难。我想用箭头键在另一个更大的 div 中移动一个小 div - 向左、向上、向右和向下。我有下面的代码，但它不能正常工作。

HTML 和 CSS

<div id="rectangle">
    <div id="square"></div>
</div>
#rectangle {
        width: 320px;
        height: 200px;
        border: 1px solid;
        margin: auto;
        position: relative;
    }

    #square {
        width: 40px;
        height: 40px;
        background-color: deepskyblue;
        position: absolute;
        left: 0;
        top:0;
    }

Javascript

var rectangle = document.getElementById("rectangle");
var square = document.getElementById("square");
var currentPositionX = 0;
var currentPositionY = 0;

function moveSquare(event) {
    if (event.keyCode == 37) {
        currentPositionX -= 40;
        square.style.left = currentPositionX + 'px';
        if (currentPositionX <= 0) {
            currentPositionX += 40;
        }
    }
    if (event.keyCode == 38) {
        currentPositionY -= 40;
        square.style.top = currentPositionY + 'px';
        if (currentPositionY <= 0) {
            currentPositionY += 40;
        }
    }
    if (event.keyCode == 39) {
        currentPositionX += 40;
        square.style.left = currentPositionX + 'px';
        if (currentPositionX >= 280) {
            currentPositionX -= 40;
        }
    }
    if (event.keyCode == 40) {
        currentPositionY += 40;
        square.style.top = currentPositionY + 'px';
        if (currentPositionY >= 160) {
            currentPositionY -= 40;
        }
    }
}
document.onkeydown = moveSquare;

标签： javascript

解决方案

我测试了代码，发现当你靠近边界时它不能正常工作（也许这是最初的问题？）。在此我测试了另一个更简单的解决方案：我只是将您的 moveSquare 函数更改为仅在您在界限内时才起作用（我的意思是，您不应该总是增加/减少位置，然后检查您是否超出界限来纠正它）。

   function moveSquare(event) {
        if (event.keyCode == 37) {
            if (currentPositionX > 0) {
                currentPositionX -= 40;
                square.style.left = currentPositionX + 'px';
            }

        }
        if (event.keyCode == 38) {
            if (currentPositionY > 0) {
                currentPositionY -= 40;
                square.style.top = currentPositionY + 'px';
            }
        }
        if (event.keyCode == 39) {
            if (currentPositionX < 280) {
                currentPositionX += 40;
                square.style.left = currentPositionX + 'px';
            }
        }
        if (event.keyCode == 40) {
            if (currentPositionY < 160) {
                currentPositionY += 40;
                square.style.top = currentPositionY + 'px';
            }
        }
    }

这是jsfiddle：https ://jsfiddle.net/epL4a9Lq/

请下次更具体地说明您的错误（我会在回答之前对此发表评论，但我对此还没有声誉）。

希望这可以帮助！

推荐阅读