jquery draggable prevent overlap

Question

I am creating a website, where two div should not overlap each other when dragging them.I have created a jsFiddle file

also the following is the code

$(".butNotHere").draggable({
    obstacle: ".butNotHere",
    preventCollision: true,
    containment: "#moveInHere"
});

I want to have the same class name for both the div Thanks in advance.

Answer 1

I came up with sort of a "hack" to deal with this. The issue here is the dragged div is its own obstacle (all share same class). So what I did is remove the class "" when the dragging starts and re-add it when it stops. jsFiddle

$(".draggable").draggable({
    obstacle:".butNotHere",
    preventCollision: true,
    containment: "#moveInHere",
    start: function(event,ui) {
        $(this).removeClass('butNotHere');
    },
    stop: function(event,ui) {
        $(this).addClass('butNotHere');
    }
});