Используя jQuery UI, я пытаюсь создать интерфейс с двумя прокручиваемыми контейнерами, каждый из которых содержит много перетаскиваемых элементов. Пользователь может перетаскивать элемент из одного контейнера в другой.
Отбрасывающая функция не является проблемой. При удалении элемент отделяется и воссоздается в нужном месте под его новым родителем.
Моя проблема в том, что элемент перетаскивания не может отображаться вне его контейнера, когда в контейнере position:relative;
применяется, поэтому при перетаскивании элемент исчезает, когда он перемещается за пределы контейнера.
Это поведение по умолчанию имеет смысл, так как обычно пользователь хотел бы перетащить элемент внутри своего контейнера. В качестве обходного решения я решил, что решение будет заключаться в использовании свойства draggable "appendTo", которое, как я думал, перемещает элемент за пределы его контейнера, но, к сожалению, это, похоже, не оказало никакого эффекта.
DOM: (каждое представление прокручивается, и каждый контейнер имеет положение: относительное и такое же большое, как и все элементы)
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 для упрощенного объяснения проблемы. Я не хотел раздувать пример с помощью droppable code, поэтому это просто иллюстрирует проблему перетаскивания. http://jsfiddle.net/Em7Ak/
Большое спасибо заранее.