Question

我对编程很新。最近，我开始学习jQuery，我尝试用它做一点“游戏”。但是，我无法在任何地方找到关于如何使jQuery对象触发JavaScript事件的答案。

我的代码是：

    <!DOCTYPE html>

    <head>
        <title></title>
        <link href='stylesheet.css'/>
        <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
        <script>
        confirm("Are you ready for your race?")
var snd = new Audio("rev1.mp3");
snd.play();

$(function() {
$("#car").draggable();
});
        </script>
    </head>
    <body>
        <div id="car">
            <div id="top"></div>
            <div id="bottom"></div>
            <div id="fwheel"></div>
            <div id="bwheel"></div>
        </div>
        <div id="line">
        <div id="line1"><img src="#"></div>
        <div id="line2"><img src="#"></div>
        </div>
    </body>
</html>

我在这里要做的是当对象（div为'car'）到达'line2'时，会弹出一个警告并播放声音，但我不知道如何实现这一点。< / p>

提前致谢。

Answer 1

尝试将line2添加为droppable

http://plnkr.co/edit/yDMZdXLUc4FV5lMrNYsM?p=preview

  $(function() {
    var hasReached = false;

    $("#car").draggable();

    $("#line2").droppable({over: function(){
      if(!hasReached){
        alert("Tada!!!");
        hasReached=true;
      }
      console.log("over line 2");
    }})

  });

Answer 2

您甚至可以跟踪可拖动div的x and y co-ordinate

$('#car').draggable(
    {
        drag: function(){
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
           //check it is over the line and show alert
        }
    });

Answer 3

您可能使用与此处给出的答案相同的答案：

How do I trigger the Drop event with jQuery UI Droppable without actually dragging and dropping?

$("#droppable").droppable({
        drop: function(event, ui) {
            do stuff }
    }); var drop_function = $("#droppable").droppable.option('drop'); drop_function();

在jQuery中的可拖动对象达到某一点后，如何创建JavaScript事件触发器？

3 个答案: