How do I make a JavaScript event trigger after a draggable object in jQuery has reached a certain point? -
i new programming in general. recently, have started learning jquery , have tried making little 'game' it. however, can not find answer anywhere on how make jquery object trigger javascript event.
my code is:
<!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 ready 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> what trying here when object (which div id 'car') reaches 'line2', alert pops , sound plays, not sure how make happen.
thanks in advance.
try adding 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"); }}) });
Comments
Post a Comment