How To Detect Div Collision In My Case?

I want to detect the div collision when user drag their mouse. I have something like

).draggable({ drag: function (event, ui) { var height = ui.helper.height(); var divs = $('div.img').not($(this).children()); var pos = ui.position; divs.each(function (index, value) { var t = $(this).position(); var hei = $(this).height() if (t.top <= pos.top + height ) { // check for top collision if (pos.left <= t.left + $(this).width()) { // check for side collision console.log('hit the object'); } } }); } });

And a Demo

Solution 2:

First of all take look at :
Please recommend a JQuery plugin that handles collision detection for draggable elements

But if you want to implement it by yourself , You have to look up Separating Axis Theorem:
Hyperplane separation theorem

Furthermore you can use Javascript game engine for jQuery by the following link :
Javascript game engine for jQuery