Drag and drop with animations in jquery
Published on Mar 10, 2009 by Jamie MunroEvery year at Halloween, my company offers prizes to the best dressed employees. For the past two years I have one 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 there.
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 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:
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".
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!