Korzystając z interfejsu użytkownika jQuery, próbuję utworzyć interfejs z dwoma przewijalnymi kontenerami, z których każdy zawiera wiele elementów przeciąganych. Użytkownik może przeciągnąć element z jednego kontenera do drugiego.

Funkcja upuszczania nie stanowi problemu. Po upuszczeniu element jest odłączany i odtwarzany we właściwym miejscu pod nowym rodzicem.

Moim problemem jest toelement przeciągany nie może być wyświetlany poza kontenerem, gdy kontener maposition:relative; stosowany, więc podczas przeciągania element zniknie, gdy zostanie przeniesiony poza granice kontenera.

To domyślne zachowanie ma sens, ponieważ normalnie użytkownik chciałby przeciągnąć element do swojego kontenera. Jako obejście założyłem, że rozwiązaniem będzie użycie właściwości przeciągnij „appendTo”, co, jak sądziłem, spowoduje przeniesienie elementu poza jego kontener, ale niestety nie miało to żadnego efektu.

DOM: (każdy widok jest przewijany, a każdy kontener ma pozycję: względną i jest tak duży, jak musi być, aby pomieścić wszystkie elementy)

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

Zobacz JSFiddle, aby uzyskać uproszczone wyjaśnienie problemu. Nie chciałem wznosić przykładu z kodem, który można porzucić, więc to tylko ilustruje problem przeciągania.http://jsfiddle.net/Em7Ak/

Z góry bardzo dziękuję.