在 jQuery 中的可拖动对象达到某个点后，如何触发 JavaScript 事件？答案

【问题标题】：How do I make a JavaScript event trigger after a draggable object in jQuery has reached a certain point?在 jQuery 中的可拖动对象达到某个点后，如何触发 JavaScript 事件？
【发布时间】：2015-06-25 13:59:27
【问题描述】：

总的来说，我对编程还很陌生。最近，我开始学习 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 id 'car'）到达'line2'时，会弹出警报并播放声音，但我不知道如何实现。

提前致谢。

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案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");
    }})

  });

【讨论】：

【解决方案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
        }
    });

【讨论】：

【解决方案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();

【讨论】：

在这种情况下，您应该将问题标记为重复。