如何使用 JQuery 拖动动态图像？ [关闭]答案

【问题标题】：How can i drag a moving image using JQuery? [closed]如何使用 JQuery 拖动动态图像？ [关闭]
【发布时间】：2017-05-16 01:47:12
【问题描述】：

您好，我是 JQuery 或 java 新手，实际上我是编程新手！！！我做了 jQUERY 的基本教程并使用 Jquery 制作游戏。我被困在一件事上，也不确定我的代码是否正确，这是我的代码..

var b = function($b, speed) {
    var beeWidth = $b.width();

    $b.animate({
        "right": "90%",
        "left": "90%"
    }, speed, function() {
        $b.animate({
            "left": 0 - beeWidth + "px"
        }, speed, function() {
            b($b, speed);
        });
    });

};
$(function() {
    b($("#b"), 5000);
    b($("#bOne"), 4500);
    b($("#bTwo"), 4000);
    b($("#bThree"), 3500);
    b($("#bfour"), 3000);
    b($("#bfive"), 2500);
    b($("#bsix"), 2000);
    b($("#bseven"), 1500);
});

body * {
  display: block;
}
body {
    background-image: url("...");
}

img{
  width: 150px;
  height: 75px;
  position:relative;
  display:inline-grid;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<img id="b" src="http://www.clker.com/cliparts/s/o/o/A/x/F/bee-md.png">
<img id="bOne" src="http://www.clker.com/cliparts/s/o/o/A/x/F/bee-md.png">
<img id="bTwo" src="http://www.clker.com/cliparts/s/o/o/A/x/F/bee-md.png">
<img id="bThree" src="http://www.clker.com/cliparts/s/o/o/A/x/F/bee-md.png">
<img id="bfour" src="http://www.clker.com/cliparts/s/o/o/A/x/F/bee-md.png">
<img id="bfive" src="http://www.clker.com/cliparts/s/o/o/A/x/F/bee-md.png">
<img id="bsix" src="http://www.clker.com/cliparts/s/o/o/A/x/F/bee-md.png">
<img id="bseven" src="http://www.clker.com/cliparts/s/o/o/A/x/F/bee-md.png">

【问题讨论】：

你能解释一下你到底想做什么，你已经尝试了什么以及你的问题在哪里？
使用这个jqueryui.com/draggable
请解释您的游戏是如何运作的以及为什么需要拖动图像
或者这个spritely.net
实际上我正在尝试制作一个蜜蜂从左到右移动但每只蜜蜂的速度不同的游戏，如果你点击一只蜜蜂，你可以拖动它并将蜜蜂放在笼子里（我稍后会做）如果你把它们放在笼子里，你会得到品脱，但我被困在自动取款机上。我觉得 Nd 看起来不可能，因为这是我在学校的第一年，我喜欢编码，想学很多东西，所以试着思考一个项目，让它让我习惯它并有一些经验提前谢谢????

标签： javascript jquery html css draggable

【解决方案1】：

是的，你可以！你应该只使用jQuery UI。

$(function(){
  $( "#draggable" ).draggable();
});

#draggable{
  width: 100px;
  height: 100px;
  background: #000;
  color: #FFF
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="draggable">
  I AM DRAGGABLE
</div>

【讨论】：

我知道怎么做那个人，但我想让我的照片拖动并且它们正在移动我尝试了所有方法来做到这一点，但我不知道；/也许我把我的代码放在错误的地方或类似的地方如果我想拖动我的第一张图片我 ca id #b 但没有任何反应.. 将感谢任何形式的帮助谢谢 :)
@AliJockeY 你可以移动任意数量的图像和元素，如果你给它们添加一个可拖动的类......
我已经给了 img 一个 id，我不能只调用那个 id 来拖动它吗？ Nd你能告诉我把我的代码放在我的script.js的哪里吗谢谢:)