What is collidify?

collidify.js is a jQuery plugin that handles jQuery UI draggable collision events.

During the process of working one of my projects, I really wanted to have draggable elements around a countainer, but revert back if invalid. Some libraries worked decently, but still overflowed outside of containers, or weren't very intuitive. I sought to solve this issue and make collision and revert events easier in jQuery. I then realized it might be nice to have borders appear when dragging over another element to signify where draggables can be dropped. Thus, collidify.js has a built in border function to make certain collision events easier to handle!

In short, collidify.js can help handle your collision events with draggables and has built in methods for reverting and applying borders to elements!

Get Started

Getting collidify.js

Source

You can download the source from GitHub here.

CDN - jsdelivr

You can use the CDN version of collidify here.

Setup

collidify.js requires jQuery and jQuery UI to function! You can link the CDNs of the modules like this...

or get the official downloads for them here:
jQuery
jQuery UI

Make sure you link collidify.js after linking jQuery and UI!

Documentation

collidify.js is super easy to use, and has a great amount potential for customization.

Element.collidify()

The syntax for using collidify is shown below. The collisionOptions is an object that is used for collisions, whereas draggableOptions is where you can put your typical jQuery UI draggable options

$(element).collidify(collisionOptions, draggableOptions)

Options and Events

Options

The collisionOptions parameter can take several options pertaining to collision events, and can be mix and matched. However, if borderStyle is used, borderClass does not need to be used.

collides: [] || $(), // An array of elements, or an element that trigger collision events
revert:   [] || $(), // An array of elements, or an element that will revert position if dragged over
border:   [] || $(), // Lists the items, or an item that will receive a border when the element is dragged over
borderStyle: "2px dashed blue", //The style for border events
borderClass: ".border", //A class for border events

Events

The collisionOptions parameter does also have a bunch of events that can be used with other options, and can be customized to your liking.

onCollide() {}, // A function trat triggers whenever an element is dragged and collides
onRevert()  {}, // A function trat triggers whenever an element is reverted
onBorder()  {}, // A function trat triggers whenever an element is given a border
onBorderRemove() {}, // A function trat triggers whenever an element's border is removed
onCollideEnter() {}, // A function trat triggers whenever an element enters collision
onCollideLeave() {}, // A function trat triggers whenever an element leaves collision

// You may use the jquery start, drag, and end events in draggableOptions, 
// but if you want to keep code concise, you can use the following events as well!
onStart() {}, // Triggers when dragging starts (used in collisionOptions)
onDrag() {}, // Triggers when dragging (used in collisionOptions)
onEnd() {}, // Triggers when dragging ends (used in collisionOptions)

Array+Object Options

Within the collides, border, or revert arrays, you can use objects to define certain fields. element is required when using objects, type defaults to enter, and borderStyle defaults to "1px solid red".

//Examples of using objects within arrays.
collides: [
    {
        element: $('.draggable-collides'),
        type: "enter" | "inside" //Enter detects collision when the item enters, inside when fully inside.
    }
]
border: [
    {
        element: $('.draggable-border'),
        type: "enter" | "inside" //Enter detects collision when the item enters, inside when fully inside.
        borderStyle: "2px dashed purple" //Any CSS string to apply to the border
    }
]
border: [
    {
        element: $('.draggable-border'),
        type: "enter" | "inside" //Enter detects collision when the item enters, inside when fully inside.
    }
]

Examples

Creating Draggables

This example shows you how to create a plain draggable (we'll get to the collision next!)

$('.draggable').collidify({}, {
    containment: ".container"
})

Collision Detection Over Another Element

Detecting when collision is detected on entering an element.

var options = {
    collides: $('.obstacle'), //Elements to collide with
    onCollideEnter: function() { //When Collision Detected:
        $('.obstacle-text').html("Collision!")
    },
    onCollideLeave: function() { //When No More Collision:
        $('.obstacle-text').html("No more Collision!")
    }
}

$('.draggable').collidify(options, {
    containment: ".container"
})

Detect Collision on Drag

Detecting when collision is detected when dragging over an element.

var options = {
    collides: $('.obstacle'), //Elements to collide with
    onCollide: function() {
        let count = parseInt($('.count-text').html());
        $('.count-text').html(count + 1)
    }
}

$('.draggable').collidify(options, {
    containment: ".container"
})

Detect Collision when Inside Element

Detecting when collision is detected when entering an element completely.

var options = {
    collides: [ {
        element: $('.obstacle'), //Elements to collide with
        type: "inside" //Default is "enter", but "inside" collision works different
    } ],
    onCollideEnter: function() { //When Collision Detected:
        $('.obstacle-text').html("Collision!")
    },
    onCollideLeave: function() { //When No More Collision:
        $('.obstacle-text').html("No more Collision!")
    }
}

$('.draggable').collidify(options, {
    containment: ".container"
})

Border on Collision

Give a border to an element when dragged over.

var options = {
    border: $('.obstacle'),
    borderStyle: "2px dashed blue"
}

$('.draggable').collidify(options, {
    containment: ".container"
})

Revert on Drop

Reverts the draggable when it is dropped on another element.

var options = {
    revert: $('.obstacle')
}

$('.draggable').collidify(options, {
    containment: ".container"
})

Multiple Seperate Collisions

Properties can be mixed and matched, and even customized to your liking!

var options = {
    border: [
        $('.obstacle'), 
        {
            element:$('.obstacle2'),
            borderStyle: "3px solid green"
        }
    ],
    revert: [
        $('.obstacle'), 
        $('.obstacle2')
    ],
    borderStyle: "2px dashed blue"
}

$('.draggable').collidify(options, {
    containment: ".container"
})

Other Properties

Collidify has some other variables that may not be as of much use to many, but I would still like to point them out here:

Variables for getting collision items:

• $.fn.collidify.CollisionItems - Returns an array of all the items checking for collision
• $.fn.collidify.BorderItems - Returns an array of all the items checking for border
• $.fn.collidify.RevertItems - Returns an array of all the items checking for border

Variables related to events/options:

• $.fn.collidify.CollisionOptions - Returns an object of all the default event functions.
• $.fn.collidify.draggableOptions - Returns an object of all the default draggable functions

Checking Collision:

• $.fn.collidify.hasCollision - The function that checks collision of an item.

Changelog

Major Changes:

• Using arrays with collidify selectors was fixed, and improved to be more customizable.
• Fixed methods for simplicity, and made fields more straightforward.

Upcoming Updates:

• More optimization
• More customization