how to prevent draggables to move through each other?

how to prevent draggables to move through each other?

Hi guys,

I have made a div and within this div I've put some draggables. These draggables can only move horizontally or vertically within the box. All is fine and all works.

The only problem is that these draggables can overlap each other. How to prevent this? I want it so that when a draggable is blocked in its path by another draggable, it can't move further. At the moment the draggable can move through to other draggable, I want to prevent this.

A demo:

Kind regards,

Maurice