diff --git a/packages/block-editor/src/components/block-draggable/index.js b/packages/block-editor/src/components/block-draggable/index.js
index 0b8f3c2d87f52..4532461a09a3f 100644
--- a/packages/block-editor/src/components/block-draggable/index.js
+++ b/packages/block-editor/src/components/block-draggable/index.js
@@ -14,11 +14,14 @@ import useScrollWhenDragging from './use-scroll-when-dragging';
 import { store as blockEditorStore } from '../../store';
 
 const BlockDraggable = ( {
+	appendToOwnerDocument,
 	children,
 	clientIds,
 	cloneClassname,
+	elementId,
 	onDragStart,
 	onDragEnd,
+	__experimentalDragComponent,
 } ) => {
 	const { srcRootClientId, isDraggable, icon } = useSelect(
 		( select ) => {
@@ -73,6 +76,7 @@ const BlockDraggable = ( {
 
 	return (
 		<Draggable
+			appendToOwnerDocument={ appendToOwnerDocument }
 			cloneClassname={ cloneClassname }
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
@@ -102,8 +106,18 @@ const BlockDraggable = ( {
 				}
 			} }
 			__experimentalDragComponent={
-				<BlockDraggableChip count={ clientIds.length } icon={ icon } />
+				// Check against `undefined` so that `null` can be used to disable
+				// the default drag component.
+				__experimentalDragComponent !== undefined ? (
+					__experimentalDragComponent
+				) : (
+					<BlockDraggableChip
+						count={ clientIds.length }
+						icon={ icon }
+					/>
+				)
 			}
+			elementId={ elementId }
 		>
 			{ ( { onDraggableStart, onDraggableEnd } ) => {
 				return children( {
diff --git a/packages/block-editor/src/components/list-view/block-contents.js b/packages/block-editor/src/components/list-view/block-contents.js
index 8d5b03395f3e2..356cc7cbf411e 100644
--- a/packages/block-editor/src/components/list-view/block-contents.js
+++ b/packages/block-editor/src/components/list-view/block-contents.js
@@ -47,8 +47,12 @@ const ListViewBlockContents = forwardRef(
 			[]
 		);
 
-		const { AdditionalBlockContent, insertedBlock, setInsertedBlock } =
-			useListViewContext();
+		const {
+			AdditionalBlockContent,
+			insertedBlock,
+			listViewInstanceId,
+			setInsertedBlock,
+		} = useListViewContext();
 
 		const isBlockMoveTarget =
 			blockMovingClientId && selectedBlockInBlockEditor === clientId;
@@ -74,7 +78,12 @@ const ListViewBlockContents = forwardRef(
 						setInsertedBlock={ setInsertedBlock }
 					/>
 				) }
-				<BlockDraggable clientIds={ draggableClientIds }>
+				<BlockDraggable
+					appendToOwnerDocument
+					clientIds={ draggableClientIds }
+					__experimentalDragComponent={ null }
+					elementId={ `list-view-${ listViewInstanceId }-block-${ clientId }` }
+				>
 					{ ( { draggable, onDragStart, onDragEnd } ) => (
 						<ListViewBlockSelectButton
 							ref={ ref }
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 49d404cfc817c..0ef84b09188b5 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -340,6 +340,29 @@
 		line-height: 0;
 	}
 
+	&[id^="clone-"] {
+		align-items: center;
+		display: flex;
+		height: 36px;
+		background: $white;
+		border: 1px solid $gray-400;
+		border-radius: $radius-block-ui;
+		opacity: 0.75;
+
+		.block-editor-list-view-block__contents-cell {
+			flex: 1;
+		}
+
+		&.is-selected td {
+			background: $white;
+
+			.block-editor-list-view-block-select-button,
+			.components-button.has-icon {
+				color: inherit;
+			}
+		}
+	}
+
 	.block-editor-list-view-block-select-button__images {
 		display: flex;
 	}