Mit der jQuery-Benutzeroberfläche versuche ich, eine Schnittstelle mit zwei scrollbaren Containern zu erstellen, die jeweils viele ziehbare Elemente enthalten. Der Benutzer kann ein Element von einem Container in den anderen ziehen.

Die Drop-Funktion ist kein Problem. Wenn das Element gelöscht wird, wird es abgetrennt und an der richtigen Stelle unter dem neuen übergeordneten Element neu erstellt.

Mein Problem ist dasDas ziehbare Element kann nicht außerhalb seines Containers angezeigt werden, wenn der Container hatposition:relative; angewendetWenn Sie also ziehen, wird das Element ausgeblendet, wenn es außerhalb der Containergrenzen verschoben wird.

Dieses Standardverhalten ist sinnvoll, da der Benutzer normalerweise ein Element in seinen Container ziehen möchte. Als Problemumgehung hatte ich angenommen, dass die Lösung darin besteht, die ziehbare Eigenschaft 'appendTo' zu verwenden, mit der das Element aus dem Container verschoben wird. Leider scheint dies keine Auswirkung zu haben.

DOM: (Jede Ansicht ist scrollbar und jeder Container hat eine relative Position und ist so groß, wie es sein muss, um alle Elemente aufzunehmen.)

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

Eine vereinfachte Erklärung des Problems finden Sie in JSFiddle. Ich wollte das Beispiel nicht mit ablegbarem Code aufblähen, daher veranschaulicht dies nur das Problem des Ablegens.http://jsfiddle.net/Em7Ak/

Vielen Dank im Voraus.