Drag and drop with animations in jquery

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:

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

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!

Published on Mar 10, 2009

Tags: Javascript | drag and drop | JavaScript | jQuery Tutorial