How to prevent draggable child elements from dragging over each other?

Question

How to prevent draggable child elements from dragging over each other in absolute position? Something like:

if( ($("#firstChild").position().left) >= ($("#secondChild").position().left) )
{
    $(this).draggable({ disabled: true });
}

but this only disables dragabble when stop dragging, the goal is to prevent from overdragging in some way...Or with Droppable???

Any ideas for CASE 2?

EDIT:

Also, this is maximum for child1 towards child2 , so no overlap occurs, but child1 can push child2 on right, and child2 can push child1 on left, important thing is that no overlap ocurrs!

Answer 1

you can use gamequery plugin. theres a collision detection.

second thing you can do is: when you hover your element while dragging... just trigger drop ? so he will never be able to drag it inside. make something like drag position of mouse at the right of the dragged element so you are sure thats not possible to drag it inside this element.

i hope you know what i mean

example calling drop:

$('#rightbox').live('mouseenter', function(){
  $('#leftbox').droppable.option('drop');
});

something like that... havent test it but its a way to start with