jQuery sincronizar 2 div's

[Timak]

Hola!

Tengo una gran duda: ¿cómo hago para que 2 div's estén sincronizados? Es decir, si pulso un botón, el contenido del 1º div pasará al 2º div y viceversa (también si por ejemplo elimino un elemento del 2º div, entonces al volver al 1º div también debe desaparecer dicho elemento) No sé si me entienden.

Yo he probado con ese código, usando innerHTML y append:

Código Javascript:

function relacion(){
        $("#div2").append("<ul class='ui-sortable ui-droppable' id='lista2'>");
        $("#div1 .lista1 li").each(function(){
            elemento = $(this)[0].innerHTML;
            $("#div2 ul").append("<li class='ui-state-default ui-draggable'>" + elemento + "</li>");
        });
        $("#div2").append("</ul>");
        $("#div1 ul").remove();
    }
 

Esto es, en el div2 inserto el tag ul, luego mediante iteraciones guardo el contenido del innerHTML del div1 (en mi caso sería el tag a) en la variable "elemento" e inserto el tag li en la lista recién insertada del div2. Por último en el div2 inserto el tag ul de cierre y a continuación elimino la lista del div1.

Me ha funcionado, pero entonces ya no he podido mover los elementos mediante el draggable y el droppable, porque al parecer jquery no reconoce a los elementos insertados por el append o algo así...

He aquí el html:

Código HTML:

<div id="div1">
<ul class="lista1">
<li><a href="">uno</a></li>
<li><a href="">dos</a></li>
<li><a href="">tres</a></li>
</ul>
</div>
<div id="div2"></div> <!--esta vacío inicialmente-->
<a href="" onclick="javascript:relacion()" id="boton">Pulsar</a>
 

Muchísimas gracias por adelantado.

Saludos.