Javascript 通过单击方向按钮在容器内移动图像？

我在一个容器中有一个图像。我的要求是在容器内移动图像并获得其坐标。之前我使用了可拖动功能来实现这一点

但是现在我希望通过使用箭头键来实现相同的行为。请帮忙。谢谢

我以前的代码

HTML

这不是拖动-您将需要收听

向下键

事件并自行处理移动图像。这对于jQuery来说并不难

您基本上需要查看他们是否按下了箭头键，检查移动是否不会超出容器（如果这是您想要的），然后移动图像并存储新坐标。请注意，如果他们按住键，它将重复调用

keydown

事件，图像将继续移动

//全局存储x和y，以便您可以在任何需要的地方使用它们
变量x，y；
$（函数（）{
//设置每次按下时要移动的像素数
var阶跃=5；
//缓存对指针和爪jquery对象的引用
var thePointer=$（“#pointer”）；
var theClaw=$（'爪'）；
$（'body'）。在（'keydown'，函数（e）上{
//获取当前位置
//这已经是相对于爪，所以不需要计算出来
var pos=指针位置（）；
//现在检查按下了哪个键
开关（e.which）
{
案例38://以上
如果（pos.top>=步骤）{//检查它是否不会从容器中取出
pos.top-=步骤；//更新存储的位置
css（'top'，pos.top+'px'）；//移动图像
}
打破
案例40://向下
如果（位置顶部=步进）{
位置左-=步进；
css（'left'，pos.left+'px'）；
}
打破
案例39://对
if（pos.left Define drawing..？通常是指在单击并按住某个对象后移动鼠标，会发出各种鼠标事件，而您使用的库（如on）依赖于这些事件。看起来这不是您想要的。因此，您可能希望明确解释您想要的内容。按箭头键时是什么意思(←,↑,→,↓), 那么图像应该向那个方向移动吗？
 <div id="claw" name='claw' style="overflow:hidden;width:320px;height:240px;position: relative; left: 0; top: 0;">
   <img id='machine_image' />
   <img id='pointer' src='images/circle.png' name='image' style="position: absolute; top: 105px; left: 145px;">
  </div>   

$('#pointer').draggable({
cursor: 'move',
    containment: '#claw',
    stop: function () {
        var cont = $('#claw').offset();
        var img = $(this).offset();
        x = img.left - cont.left;
        y = img.top - cont.top;
    }
});