Перетаскиваемый элемент скрыт вне контейнера
Используя 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/
Спасибо заранее.