Objetos arrastrables

[patilanz]

Hola estoy usando jquery ui para hacer que unos divs se pueden arrastrar pero necesito ayuda con como hacer que los divs al tocar se unos a otros se paren y no entren dentro de sus contenidos. Es decir que una div no entre en otra al moverse.

Como puedo conseguir esto??

[marlanga]

A cada elemento tienes que almacenar su última posición X e Y válida de donde estaba. Cuando se mueva, en su evento drag compruebas si ese div colisiona con algun otro div con el sencillo método de detección de colisión de rectángulos. Si choca con alguno, le asignas el valor de X e Y que tenias almacenado de la última posición válida.

[patilanz]

Iniciado por marlanga

A cada elemento tienes que almacenar su última posición X e Y válida de donde estaba. Cuando se mueva, en su evento drag compruebas si ese div colisiona con algun otro div con el sencillo método de detección de colisión de rectángulos. Si choca con alguno, le asignas el valor de X e Y que tenias almacenado de la última posición válida.

Hola gracias por tu respuesta pero no se de que ejes x e y me hablas ?? Seria el left y el top o no??

Saludos

[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??

[marlanga]

Pon un ejemplo funcionando (hasta donde puedas) en http://jsfiddle.net/
Y sí, con X e Y me refería a left y top respectivamente. Pero cuidado con los offset de la página.