From ef48862ae8d6c725f8794e0dd8682d990a68c0c8 Mon Sep 17 00:00:00 2001
From: Ella van Durpe <ella@vandurpe.com>
Date: Wed, 27 Nov 2019 22:53:20 +0100
Subject: [PATCH] Enable drag and drop

---
 .../block-editor/src/components/block-list/block.js    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 88ff75a4a605..b87d17a5be44 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -237,6 +237,14 @@ function BlockListBlock( {
 		placeCaretAtHorizontalEdge( target, isReverse );
 	};
 
+	useEffect( () => {
+		wrapper.current.addEventListener( 'dragstart', preventDrag );
+
+		return () => {
+			wrapper.current.removeEventListener( 'dragstart', preventDrag );
+		};
+	} );
+
 	// Focus the selected block's wrapper or inner input on mount and update
 	const isMounting = useRef( true );
 	useEffect( () => {
@@ -493,7 +501,6 @@ function BlockListBlock( {
 			onMouseOverHandled={ hideHoverEffects }
 			onMouseLeave={ hideHoverEffects }
 			onMouseDown={ onPointerDown }
-			onDragStart={ preventDrag }
 			className={ wrapperClassName }
 			data-type={ name }
 			data-block={ clientId }
@@ -503,7 +510,6 @@ function BlockListBlock( {
 			onKeyDown={ onKeyDown }
 			tabIndex="0"
 			aria-label={ blockLabel }
-			childHandledEvents={ [ 'onDragStart', 'onMouseDown' ] }
 			tagName={ animated.div }
 			{ ...wrapperProps }
 			style={