Ändern des Containments bei einem jQuery.draggable während dem Drag

Problem

Für ein jQuery.draggable wird ein containment definiert. Während dem Drag wird die Größe des Containments geändert, aber das Draggable bewegt sich trotzdem noch innerhalb der Dimension wie beim Start des Drags.

Lösung

Die Dimension des Containments muss während dem Drag aktualisiert werden.

Hier ein Beispiel:

HTML:

<div id="containment" style="width: 800px; height: 500px;">
	<div id="draggable" style="padding: 10px; border: 1px solid black;">Trag mich</div>
</div>

JavaScript:

$("#draggable").draggable({
	containment: "parent",
	drag: function(event, ui) {

		// Hier könnte der Code stehen, zum dynamischen Anpassen der Größe des Containments während dem Drag

		// Containment Dimensionen aktualisieren
		$(this).data('draggable').containment = [0,0,$("#containment").innerWidth(), $("#containment").innerHeight()];
	}
});