Try dragging the 'real' list view item instead of using a separate chip

packages/block-editor/src/components/block-draggable/index.js

@@ -17,6 +17,7 @@ const BlockDraggable = ( {
 	children,
 	clientIds,
 	cloneClassname,
+	elementId,
 	onDragStart,
 	onDragEnd,
 	__experimentalDragComponent,
@@ -89,13 +90,18 @@ const BlockDraggable = ( {
 				}
 			} }
 			__experimentalDragComponent={
-				__experimentalDragComponent || (
+				// 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( {

packages/block-editor/src/components/list-view/block-contents.js

@@ -13,7 +13,6 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import ListViewBlockSelectButton from './block-select-button';
-import ListViewBlockDraggableChip from './block-draggable-chip';
 import BlockDraggable from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
 
@@ -65,12 +64,8 @@ const ListViewBlockContents = forwardRef(
 		return (
 			<BlockDraggable
 				clientIds={ draggableClientIds }
-				__experimentalDragComponent={
-					<ListViewBlockDraggableChip
-						className={ className }
-						clientId={ draggableClientIds[ 0 ] }
-					/>
-				}
+				__experimentalDragComponent={ null }
+				elementId={ `list-view-block-${ clientId }` }
 			>
 				{ ( { draggable, onDragStart, onDragEnd } ) => (
 					<ListViewBlockSelectButton

packages/block-editor/src/components/list-view/style.scss

@@ -341,6 +341,25 @@
 	.block-editor-list-view-block-select-button__lock {
 		line-height: 0;
 	}
+
+	&[id^="clone-"] {
+		position: relative;
+		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__description,
@@ -443,58 +462,3 @@ $block-navigation-max-indent: 8;
 .list-view-appender__description {
 	display: none;
 }
-
-.block-editor-list-view-block-draggable-chip-wrapper {
-	position: absolute;
-	// Offset the chip slightly so that it's not directly under the mouse cursor.
-	// This ensures there is clearance so that the drop indicator line is visible.
-	top: $grid-unit-10;
-	left: $grid-unit-20;
-}
-
-.block-editor-list-view-block-draggable-chip {
-	// Width of the sidebar, minus the list view's padding and the block settings icon.
-	width: 350px - $grid-unit-10 - $icon-size * 2;
-	height: 36px;
-	background: $white;
-	border: 1px solid $gray-400;
-	border-radius: $radius-block-ui;
-	opacity: 0.75;
-
-	.block-editor-block-icon {
-		margin-right: $grid-unit-10;
-		flex: 0 0 $icon-size;
-	}
-
-	.block-editor-list-view-block-select-button__label-wrapper {
-		min-width: 120px;
-	}
-
-	.block-editor-list-view-block-select-button__title {
-		flex: 1;
-		position: relative;
-
-		.components-truncate {
-			position: absolute;
-			width: 100%;
-			transform: translateY(-50%);
-		}
-	}
-
-	.block-editor-list-view-block-select-button__anchor-wrapper {
-		position: relative;
-		max-width: min(110px, 40%);
-		width: 100%;
-	}
-
-	.block-editor-list-view-block-select-button__anchor {
-		position: absolute;
-		right: 0;
-		transform: translateY(-50%);
-		background: rgba($black, 0.1);
-		border-radius: $radius-block-ui;
-		padding: 2px 6px;
-		max-width: 100%;
-		box-sizing: border-box;
-	}
-}