Objetos arrastrables

[patilanz]

Tengo varios objetos que quiero que cuando un objeto que es movido choque con otro se pare y no entre en el. Pero no consigo hacer nada... Tengo el siguiente codigo:

En el window.load tengo esto:

Código Javascript:

$( "#p1" ).draggable({containment: 'parent', cursor: "move", cursorAt: { bottom: 0}, drag: function(event, ui){
        almacenar(1);   
    }});
    $( "#p1" ).resizable({animate: true, minHeight: 200, minWidth: 200, maxHeight: 300, maxWidth: 400, helper: 'rezisable_helper', containment: "parent"});
    $( "#p2" ).draggable({containment: 'parent', cursor: "move", cursorAt: { bottom: 0}, drag: function(event, ui){
        almacenar(1);   
    }});
    $( "#p2" ).resizable({animate: true, minHeight: 200, minWidth: 200, maxHeight: 300, maxWidth: 400, helper: 'rezisable_helper', containment: "parent"});
    for(var s=1;s!=7;s++){
        var o=document.getElementById('p'+s);
        p[s]={x:o.style.left.substring(0,o.style.left.indexOf('px')),
          y:o.style.top.substring(0,o.style.top.indexOf('px')),
          width:o.style.width.substring(0,o.style.width.indexOf('px')),
          height:o.style.height.substring(0,o.style.height.indexOf('px'))};
    }
 

Y luego en una función esto:

Código Javascript:

function almacenar(s){
    var o=document.getElementById('p'+s);
 
    for(var i=1;i!=7;i++){
        if(i!=s){
            var c=true;
            var ob=document.getElementById('p'+i);
            if(p[s].x+p[s].width<ob.style.left.substring(0,ob.style.left.indexOf('px'))){
                c=false;
            }
            if(p[s].y+p[s].height<ob.style.top.substring(0,ob.style.top.indexOf('px'))){
                c=false;    
            }
            if(p[s].x>ob.style.left.substring(0,ob.style.left.indexOf('px')) + ob.style.width.substring(0,indexOf('px'))){
                c=false;
            }
            if(p[s].y>ob.style.top.substring(0,ob.style.top.indexOf('px')) + ob.style.height.substring(0,indexOf('px'))){
                c=false;
            }
        }
        if(c==true){
            document.getElementById('p'+s).style.left=p[s].x+'px';
            document.getElementById('p'+s).style.top=p[s].y+'px';
            document.getElementById('p'+s).style.width=p[s].width+'px';
            document.getElementById('p'+s).style.height=p[s].height+'px';
            alert(document.getElementById('s'+s).style.left);
        }
    }
}
 

Pero no sucede nada y entran uno en otro :(

Alguien me puede ayudar??