Combines with jquery-ui-draggable 1.9.2+ and jquery-collision 1.0.2+. Provides collision events while dragging, and handles collision-avoidance. Collision and containment settings are hierarchical and extensible, allowing for complex interactions.

Try it out: http://eruciform.com/jquidragcollide/

Features

  • Extends jquery-ui-draggable
  • Provides events for collision-detection during dragging
  • Just as with jquery-collision, can provide protrusion events as well (escape from a restraint)
  • Can prevent collisions of the draggable and obstacles
  • Can prevent protrusions of the draggable from multiple restraints
  • Can make selected children of the draggable the "colliding entities", allowing a draggable that is a bucket of other objects, where those child objects are the ones that collide with or avoid obstacles
  • Can be configured to have multiple classes of obstacles and restraints under the same draggable
  • Documentation: https://sourceforge.net/p/jquidragcollide/wiki/Home/
  • Depends on: https://sourceforge.net/projects/jquerycollision/

Project Samples

Project Activity

See All Activity >

License

MIT License

Follow JQuery UI Draggable Collision

JQuery UI Draggable Collision Web Site

You Might Also Like
Our Free Plans just got better! | Auth0 by Okta Icon
Our Free Plans just got better! | Auth0 by Okta

With up to 25k MAUs and unlimited Okta connections, our Free Plan lets you focus on what you do best—building great apps.

You asked, we delivered! Auth0 is excited to expand our Free and Paid plans to include more options so you can focus on building, deploying, and scaling applications without having to worry about your secuirty. Auth0 now, thank yourself later.
Try free now
Rate This Project
Login To Rate This Project

User Ratings

★★★★★
★★★★
★★★
★★
0
1
0
0
0
ease 1 of 5 2 of 5 3 of 5 4 of 5 5 of 5 4 / 5
features 1 of 5 2 of 5 3 of 5 4 of 5 5 of 5 4 / 5
design 1 of 5 2 of 5 3 of 5 4 of 5 5 of 5 4 / 5
support 1 of 5 2 of 5 3 of 5 4 of 5 5 of 5 4 / 5

User Reviews

  • I like this feature, but I'm facing a margin issue when I drag the element inside a container with prevent collision
Read more reviews >

Additional Project Details

Intended Audience

Developers

Programming Language

JavaScript

Registered

2011-05-18