Drag and drop with animations in jquery

Every year at Halloween, my company offers prizes to the best dressed employees.  For the past two years I have won as well as my co-worker that partakes in our crazy costumes.  You may be wondering what this has to do with drag and drop, don’t worry I’m getting.

This years prize happened to be a monkey slingshot.  Basically you place your index and middle fingers in pockets attached to the monkey’s arms.  You then proceed to pull back and let fly.  Well, as you can imagine, we had a lot of fun with this guy, so much fun in fact we broke it 🙁

So one day after work I was messing around with drag and drop and some jQuery tutorial animations.  I was quickly able to get a “mock slingshot” shooting at a target and this is what I want to share today.

I tried really hard to make it better graphically and all that jazz, unfortunately I could not find a good picture of a slingshot that would work for me and I think I might be the worse designer ever, so I didn’t even go down that road.

Anyways, enough background, let me get to the point.  Here is my full source code for this, it’s quite short and sweet:

[code]<script type=”text/javascript” src=”/dragdrop/js/jquery.js”></script>
<script type=”text/javascript” src=”/dragdrop/js/jquery-ui.js”></script>
<div id=”content”>

<style>
#container-box {
 border: 1px solid #000;
 height: 525px;
 margin: 0 auto;
 width: 800px;
}
#ui-draggable, #ui-impact {
 background: #FF0000;
 height: 50px;
 left: 375px;
 position: relative;
 width: 50px;
}
#ui-impact {
 background: #FFFF00;
}
</style>
<script>
  $(document).ready(function(){
    $(“#ui-draggable”).draggable({
  containment: ‘#container-box’,
  stop: function(e, ui) {
    $(this).animate( { top: “0px”, left: “375px” }, 100,
     function() { $(“#ui-impact”).hide(“explode”, 5); } ).hide(“explode”, 1);
   }
  });
 $(“#ui-reset”).click(function(){
  $(“#ui-impact”).show();
  $(“#ui-draggable”).show();
 });
  });
  </script>
 <input type=”Button” id=”ui-reset” value=”Reset” />
 <div id=”container-box”>
  <div id=”ui-impact”>Hit Me</div>
  <div id=”ui-draggable”>Drag Me</div>
 </div>
</div>
[/code]

Let’s break this down.  We start by including our two jquery libraries, the core and the UI.  We then add a bit of CSS to stylize our boxes.  Next up is our Javascript code, I’m going to skip over this for a second to describe the HTML first.

Our HTML is extremely basic, we create a div as our container, this just allows us to contain our draggable element within this element.  Inside of that we create two other divs, one is the object you are “shooting” at and the other one is the one you drag back to “shoot”.

Back to the Javascript, our main code goes in a function that is called when the document has finished loading.  The first thing we do is instantiate our draggable element, all of the “nifty” work happens in the stop() function.  When we stop dragging, we invoke our animation.  We simply tell our draggable object that when we stop dragging, move to postion 375, 0 of our containable div in 100 milliseconds.  When it reaches that point, we tell our impact div to hide by exploding over 5 seconds.  We also tell our draggable element to hide by exploding as well.

The last piece of Javascript invokes the show() function for both divs when we click the reset button.

I challenge anyone to turn this into a real slingshot and come back and share the code as I know all of the guys at work would love it!