Elemento arrastável escondido fora do contêiner

Usando o jQuery UI, estou tentando criar uma interface com dois contêineres roláveis, cada um contendo muitos elementos arrastáveis. O usuário pode arrastar um elemento de um contêiner para o outro.

O recurso de descarte não é um problema. Quando descartado, o elemento é desanexado e recriado no lugar certo sob seu novo pai.

Meu problema é queo elemento arrastável não pode ser exibido fora de seu contêiner quando o contêiner tiverposition:relative; aplicada, portanto, ao arrastar, o elemento desaparecerá quando for movido para fora dos limites do contêiner.

Esse comportamento padrão faz sentido, já que normalmente o usuário iria querer arrastar um elemento dentro de seu contêiner. Como uma solução alternativa, eu supus que a solução seria usar a propriedade arrastável 'appendTo', que eu achava que moveria o elemento para fora de seu contêiner, mas infelizmente isso não pareceu ter qualquer efeito.

DOM: (cada view é rolável e cada container tem posição: relative e é tão grande quanto precisa ser para conter todos os 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
});

Por favor, veja o JSFiddle para uma explicação simplificada do problema. Eu não queria inchar o exemplo com código droppable, então isso apenas ilustra o problema de arrastar.http://jsfiddle.net/Em7Ak/

Muito obrigado antecipadamente.