使用 Javascript 移动带有上、下、左和右按钮的 div 的位置答案

【问题标题】：Using Javascript to shift location of divs w/ Up, Down, Left and Right buttons使用 Javascript 移动带有上、下、左和右按钮的 div 的位置
【发布时间】：2013-05-25 09:25:04
【问题描述】：

我刚开始接触 jquery 和 javascript，但是，我正用头撞墙试图弄清楚这一点。我试过使用 .css 和 .animate 命令，但我认为我做的不正确，或者我没有区分变量。

最后会有 DIV 用于身体、眼睛、脸、牙齿等。每个都有自己的 id。

每个“类别”至少有 20 个

最终目标是拥有一种“生物创造者”，您可以在其中拥有一系列眼睛、牙齿等。它们中的每一个都是透明的 png，分层时如有必要还带有 z-index。

目前我正在使用以下内容来定位/替换 div 图像：

function showimagename(){document.getElementById('centraldiv').innerHTML="<a href='#'>
<img src='images/imagethumb2.png' border='0'></a>";}

这部分工作完美。

而不是以前的拖放方法（兼容性有限），我正在尝试添加一组上、下、左、右箭头，单击这些箭头会将特别命名的 div 移动 5 个像素。在用户对他们的选择感到满意后，我打算使用画布来捕获图像（然后可能会分享？发送？进一步实施？）我已经删除了所有实际图像以保持简单。

这会在 Flash 中工作吗？当然！我只是对使用 Flash 编码不感兴趣，因为我会尽可能地兼容。

问题：

我有 4 个“箭头”可以指定向上、向下、向左或向右移动。但由于某种原因，我只能做上/下或左/右，此外当我为另一个 div（比如生物的脚）添加第二组时，它只尊重脚本的最后一次迭代。

如果我的代码效率低下、草率或以其他方式侮辱您的感官，我深表歉意，我是新人：D。

<!DOCTYPE html>
<html><head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
var imgObj =null;function init()
{imgObj = document.getElementById('centraldiv');
imgObj.style.position= 'relative'; 
imgObj.style.top = '0px';}function moveDown()
{imgObj.style.top = parseInt(imgObj.style.top)+5+'px';}
window.onload =init;

var imgObj =null;function init()
{imgObj = document.getElementById('centraldiv');
imgObj.style.position= 'relative'; 
imgObj.style.top = '0px';}function moveUp()
{imgObj.style.top = parseInt(imgObj.style.top)-5+'px';}
window.onload =init;
</script>

<script type="text/javascript">
var imgObj =null;function init()
{imgObj = document.getElementById('centraldiv');
imgObj.style.position= 'relative'; 
imgObj.style.left = '0px';}function moveRight()
{imgObj.style.left = parseInt(imgObj.style.left)+5+'px';}
window.onload =init;

var imgObj =null;function init()
{imgObj = document.getElementById('centraldiv');
imgObj.style.position= 'relative'; 
imgObj.style.left = '0px';}function moveLeft()
{imgObj.style.left = parseInt(imgObj.style.left)-5+'px';}
window.onload =init;
</script>
</head>
<body>
<div id="centraldiv"><img height="50" width="50" src="//upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia- logo.png"></div><P>
<a href="#" onclick="moveLeft()">LEFT</A>
<a href="#" onclick="moveRight()">RIGHT</A>
<a href="#" onclick="moveDown()">DOWN</A>
<a href="#" onclick="moveUp()">UP</A>
</body></html>

请帮忙，我激怒了我的编码伙伴！

【问题讨论】：

标签： jquery html button positioning targeting

【解决方案1】：

您可以使用 JQuery 非常简单地实现预期效果（您似乎正在使用它）。

不确定您打算如何将其全部展开，但这样的事情应该可行：

moveImageLeft = function () {
   $('img').animate({'left', '-5px'});
}
$("#moveLeft").click(moveImageLeft);

此示例会将所有图像向左移动，因此您需要仔细命名图像。话虽如此，您最初想到的拖放方法在许多浏览器中都可以正常工作。查看JQuery UI's Draggable Widget。如果您在实施方面需要帮助，我们随时待命。

分贝

【讨论】：