Перетаскиваемый элемент скрыт вне контейнера

Используя jQuery UI, я пытаюсь создать интерфейс с двумя прокручиваемыми контейнерами, каждый из которых содержит много перетаскиваемых элементов. Пользователь может перетащить элемент из одного контейнера в другой.

Возможность сбрасывания не является проблемой, При удалении элемент отсоединяется и воссоздается в нужном месте под своим новым родителем.

Моя проблема в том чтоперетаскиваемый элемент не может быть отображен вне его контейнера, когда контейнер имеетposition:relative; прикладная, поэтому при перетаскивании элемент исчезнет, когда он будет перемещен за пределы контейнера.

Это поведение по умолчанию имеет смысл, так как обычно пользователь хочет перетащить элемент в свой контейнер. В качестве обходного пути я предположил, что решение будет заключаться в использовании перетаскиваемого свойства 'appendTo', которое, как я думал, переместит элемент за пределы его контейнера, но, к сожалению, это, похоже, не имело никакого эффекта.

ДОМ: (каждое представление прокручивается, и каждый контейнер имеет позицию: относительную и настолько большую, насколько это необходимо для размещения всех элементов)

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
});

Пожалуйста, смотрите JSFiddle для упрощенного объяснения проблемы. Я не хотел раздувать пример с помощью сбрасываемого кода, так что это просто иллюстрирует проблему перетаскивания.http://jsfiddle.net/Em7Ak/

Спасибо заранее.