如何使用JQuery拖动运动图像？

Question

您好我是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">

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;