benahm / jquery.throwable

JQuery plugin to make HTML elements throwable

JQuery.throwable

JQuery plugin to make HTML elements throwable

Create physical-like HTML objects in your browser

Code example

$(".box2d").throwable({
                        containment:[0,0,500,500],
                        drag:true,
                        gravity:{x:0,y:0},
                        impulse:{
                            f:52,
                            p:{x:1,y:1}
                        },
                        shape:"circle",
                        autostart:false,
                        bounce:0.5,
                        damping:100,
                        areaDetection:[[0,0,300,300]],
                        collisionDetection: true
                    });

Options

* gravity: object {x:valueX,y:valueY} 
* container: define the limits where the object can be thrown 
                   "window" is the default
                   "parent" the object will be contained inside the parent
                   you can specify custom a container by giving array [x1,y1,x2,y2]
* shape: defines the shape of the object, by default is "box" and you can specify "circle"
* autostart: by default the effects start at mouse move 
* drag: boolean to specify if the object will be draggable or not, by default it is set to true
* impulse: you can specify an impluse to apply on the object by giving an object 
                   {
                        f: forceValue, // define the energy of the impluse (number)
                        p: pointDirection //define the direction on the impluse object like the gravity option
                   }
* bounce: defines the bounce effect of the body (value between 0 and 1) default 0, no bounce
* damping: defines the damping(*) effect value from 0 to infini, default 0 
* areaDetection: specify an array of areas, that when an objet enter those areas the event inarea is fired 
                 and outarea event fired when exiting
* collisionDectection : bool to activate or desactivate the collision detection 

(*) : damping

Events & Callbacks

* inarea : fired when an object enter and area specified in the option areaDetection
* outarea : fired when an object exit and area specified in the option areaDetection
* collision : fired when a collision happened between two objects 
* nocollision : fired when there is no collision 

Requirements

* JQuery (of course it's a jquery plugin)

Demos

• Check out this simple demo here Octocats Demo
  
• Applying gravity per selection of elements Gravity per element
• Another demo Slider demo
  
• Demo of collision detection and area detection here
• Billard js Play Billard

Credits

• Mr. Doobs : http://mrdoob.com/92/Google_Gravity
• Alex Arnell's inheritance.js : http://code.google.com/p/inheritance/
• Box2Djs : http://box2d-js.sourceforge.net/
• JQuery-ui draggable : http://api.jqueryui.com/draggable/

How to use it!

You can test it by including this js link to your page

<script src="http://benahm.github.io/jquery.throwable/javascripts/jquery.throwable.js" type="text/javascript"></script> 

Or download the js file

jquery.throwable's Issues

Set ID for areaDetection?

Is it possible to set an ID for the areaDetection as opposed to the positioning array?

Internet Explore bug mouse event not working

octocats Demo On the internet explorer all pic fall sown more then browser height .

Second mouse event not working can't move pic .

Object is not dragable in touch devices.

I make a project with your jquery.throwable..
It works perfectly in PC with the mouse but in mobile deviecs i can't drag objectes.
Here is the link of project
http://codepen.io/mayurbirle/full/gWbvLE

touch events

Hi I've fixed a bug I was getting in ios. At the start of each touch event you need to add event = event.originalEvent;

it seems JQ can't always access event.touches, more info here

http://stackoverflow.com/questions/6173382/cant-able-to-get-the-properties-of-touchstart-event

Ground/wall div

it it possible to make a ground div
that is fixed ground div that wont react on boxes that are falling on it, but still will be a impenetrable.

really hoping on your responds, because im stuck with this 👍

avoid animation not starting until mouse moved?

I am trying to change the code to make gravity start when triggered by an event (ondocumentready, onclick, ...) but without needing the mouse to have moved before the gravity effect starts (as it is now) and I couldn't find a nice way to do it without breaking some other functionality. Can you help ?
Thanks.

intersection, of the selection object

suppose

$(".box").throwable(options1)
$("#idbox2").throwable(options2)

options2 are not applied to div#idbox2

Elements not dragable on windows 8 HTML5 apps

i'll create a new game by using your jquery.throwable plugin,for windows 8 Apps.
Your plugin works on all browsers well,but fails in ,Visual studio for windows 8 HTML5 app,in this throwable working but drag option will not work.
i was study the whole code i think the error is in
" var count = world.Query(aabb, shapes, k_maxCount); "
here count is 0 in output rather then 1. and shapes having null.

Please help me to solve out of this problem.

Elements on load are laggy and are not moving when swipped

Hi,

On ios devices, the throwable elements are laggy on load and do not move when swipped. This issue only seems to be apparent on devices which have upgraded to 7.1 as I have tested on earlier versions, and was unable to replicate.

This is the site which I am currently having the issues on: http://fashioncupboard.elleuk.com/

If you could provide me with any help it would be much appreciated.

Thanks,

Miles

restarting the world

Hi

Is there anyway to restart the physics environment? I am wanting to make the world container be resizable. I'm happy to just reboot the physics environent once a browser resize has finished.