use fallbackParent option instead of fallbackOnBody

README.md

@@ -143,7 +143,7 @@ var sortable = new Sortable(el, {
 	forceFallback: false,  // ignore the HTML5 DnD behaviour and force the fallback to kick in
 
 	fallbackClass: "sortable-fallback",  // Class name for the cloned DOM Element when using forceFallback
-	fallbackOnBody: false,  // Appends the cloned DOM Element into the Document's Body
+	getFallbackParent: null,  // Getter function that returns the parent for the cloned DOM Element
 	fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.
 
 	dragoverBubble: false,

index.html

@@ -304,7 +304,7 @@ <h4 class="col-12">Grid Example</h4>
 
 		<div id="nested" class="row">
 			<h4 class="col-12">Nested Sortables Example</h4>
-			<p class="col-12">NOTE: When using nested Sortables with animation, it is recommended that the <code>fallbackOnBody</code> option is set to true. <br />It is also always recommended that either the <code>invertSwap</code> option is set to true, or the <code>swapThreshold</code> option is lower than the default value of 1 (eg <code>0.65</code>).</p>
+			<p class="col-12">NOTE: When using nested Sortables with animation, it is recommended that the <code>getFallbackParent</code> option is set to return document.body. (`() => (document.body)`). <br />It is also always recommended that either the <code>invertSwap</code> option is set to true, or the <code>swapThreshold</code> option is lower than the default value of 1 (eg <code>0.65</code>).</p>
 			<div id="nestedDemo" class="list-group col nested-sortable">
 				<div class="list-group-item nested-1">Item 1.1
 					<div class="list-group nested-sortable">

src/Sortable.js

@@ -351,7 +351,10 @@ function Sortable(el, options) {
 
 	this.el = el; // root element
 	this.options = options = Object.assign({}, options);
-
+	if (this.options.fallbackOnBody) {
+		// backwards compatibility
+		this.options.getFallbackParent = () => (document.body)
+	}
 
 	// Export instance
 	el[expando] = this;
@@ -389,7 +392,9 @@ function Sortable(el, options) {
 		touchStartThreshold: (Number.parseInt ? Number : window).parseInt(window.devicePixelRatio, 10) || 1,
 		forceFallback: false,
 		fallbackClass: 'sortable-fallback',
+		// @obsolete use `getFallbackParent: () => (document.body)`
 		fallbackOnBody: false,
+		getFallbackParent: null,
 		fallbackTolerance: 0,
 		fallbackOffset: {x: 0, y: 0},
 		supportPointer: Sortable.supportPointer !== false && ('PointerEvent' in window) && !Safari,
@@ -851,7 +856,8 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
 		// Bug if using scale(): https://stackoverflow.com/questions/2637058
 		// Not being adjusted for
 		if (!ghostEl) {
-			let container = this.options.fallbackOnBody ? document.body : rootEl,
+			let fallbackParent = typeof this.options.getFallbackParent === 'function' ? this.options.getFallbackParent() : null
+			let container = fallbackParent ?? rootEl,
 				rect = getRect(dragEl, true, PositionGhostAbsolutely, true, container),
 				options = this.options;
 

st/app.js

@@ -202,7 +202,7 @@ for (var i = 0; i < nestedSortables.length; i++) {
 	new Sortable(nestedSortables[i], {
 		group: 'nested',
 		animation: 150,
-		fallbackOnBody: true,
+		getFallbackParent: () => (document.body),
 		swapThreshold: 0.65
 	});
 }