I've created a simple planner where the user can Drag and drop their items into allocated time slots. They can also resize these items.

When an item is resized, dragged over or dropped onto a droppable I need to check for collisions.

There is nothing special about dragging its all default jQuery stuff as is the resizing. Note that the resizing is locked so it will increment by a certain number of pixels each resize. I mention this because every even resize of the div the function 'over' and 'drop' stops working on droppable divs.

Example: If the item starts at 20 pixels, every even resize won't fire these events - 40, 80, 120 etc

Also note that at certain zoom levels this will also work fine.

Below I've added a very cut down version of how I've setup the droppable, bear in mind this works more time than it doesn't. Theres a lot of code behind what I'm doing which makes it difficult to show it.

1. var schedule = jQuery('<div>')
2.                       .addClass('timeSlot')
3.                        .css({ 'height': rowHeight, 'width': columnWidth })
4.                        .prop('id', timeTextHours + ":" + timeTextMinutes + '-' + days[index])
5.                        .appendTo(schedule)
6.                        .droppable({
7.                                            activeClass: "ui-state-hover",
8.                                            hoverClass: "ui-state-active",
9.                                            over: function (event, ui) {
10.                                                   //Check for collision
11.                                             },
12.                                             drop: function (event, ui) {
13.                                                    //Check for collision
14.                                             }
15.                                        });