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

Other Useful Business Software
Secure User Management, Made Simple | Frontegg Icon
Secure User Management, Made Simple | Frontegg

Get 7,500 MAUs, 50 tenants, and 5 SSOs free – integrated into your app with just a few lines of code.

Frontegg powers modern businesses with a user management platform that’s fast to deploy and built to scale. Embed SSO, multi-tenancy, and a customer-facing admin portal using robust SDKs and APIs – no complex setup required. Designed for the Product-Led Growth era, it simplifies setup, secures your users, and frees your team to innovate. From startups to enterprises, Frontegg delivers enterprise-grade tools at zero cost to start. Kick off today.
Start for Free
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