Utilizando jQuery UI, estoy tratando de crear una interfaz con dos contenedores desplazables, cada uno con muchos elementos que se pueden arrastrar. El usuario puede arrastrar un elemento de un contenedor a otro.

La función de caída no es un problema. Cuando se suelta, el elemento se separa y se vuelve a crear en el lugar correcto debajo de su nuevo padre.

Mi problema es queEl elemento que se puede arrastrar no se puede mostrar fuera de su contenedor cuando el contenedor tieneposition:relative; aplicado, así que mientras arrastra, el elemento desaparecerá cuando se mueva fuera de los límites del contenedor.

Este comportamiento predeterminado tiene sentido, ya que normalmente el usuario querría arrastrar un elemento dentro de su contenedor. Como solución, asumí que la solución sería utilizar la propiedad arrastrable 'appendTo', que pensé que movería el elemento fuera de su contenedor, pero desafortunadamente esto no parece haber tenido ningún efecto.

DOM: (cada vista es desplazable y cada contenedor tiene una posición: relativa y es tan grande como debe ser para contener todos los elementos)

BODY
    VIEW 1
        CONTAINER
            DRAGGABLE ELEMENTS
    VIEW 2
        CONTAINER
            DRAGGABLE ELEMENTS

Javascript:

$('div.card').draggable({
    appendTo: 'body',
    scroll: false //stops scrolling container when moved outside boundaries
});

Consulte JSFiddle para obtener una explicación simplificada del problema. No quería inflar el ejemplo con código descargable, así que esto ilustra el problema del arrastre.http://jsfiddle.net/Em7Ak/

Muchas gracias de antemano.