Drag and drop on long press

packages/block-editor/src/components/block-list/block-wrapper.js

@@ -26,6 +26,7 @@ import { isInsideRootBlock } from '../../utils/dom';
 import useMovingAnimation from '../use-moving-animation';
 import { Context, SetBlockNodes } from './root-container';
 import { BlockListBlockContext } from './block';
+import { DragOnLongPress } from './drag-on-long-press';
 import ELEMENTS from './block-wrapper-elements';
 
 const BlockComponent = forwardRef(
@@ -271,6 +272,12 @@ const BlockComponent = forwardRef(
 				} }
 			>
 				{ children }
+				<DragOnLongPress
+					target={ wrapper }
+					index={ index }
+					clientId={ clientId }
+					rootClientId={ rootClientId }
+				/>
 			</TagName>
 		);
 	}

packages/block-editor/src/components/block-list/drag-on-long-press.js

@@ -0,0 +1,145 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect, useState, createPortal } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BlockDraggableChip from '../block-draggable/draggable-chip';
+
+function useOnLongPress( ref, timeout, callback, deps ) {
+	useEffect( () => {
+		let timeoutId;
+		const set = ( event ) => {
+			clearTimeout( timeoutId );
+			timeoutId = setTimeout( () => callback( event ), timeout );
+		};
+		const unset = () => {
+			clearTimeout( timeoutId );
+		};
+		ref.current.addEventListener( 'mousedown', set );
+		ref.current.addEventListener( 'mouseup', unset );
+		return () => {
+			ref.current.removeEventListener( 'mousedown', set );
+			ref.current.removeEventListener( 'mouseup', unset );
+			clearTimeout( timeoutId );
+		};
+	}, deps );
+}
+
+export function DragOnLongPress( { target, index, clientId, rootClientId } ) {
+	const [ isDraggging, setIsDragging ] = useState( false );
+	const container = useRef( document.createElement( 'div' ) );
+
+	useOnLongPress(
+		target,
+		250,
+		() => {
+			if (
+				// isSelected is oudated.
+				! target.current.classList.contains( 'is-selected' ) ||
+				! window.getSelection().isCollapsed
+			) {
+				return;
+			}
+
+			const cancel = () => {
+				window.removeEventListener( 'mouseup', cancel );
+				document.removeEventListener( 'selectionchange', cancel );
+
+				target.current.style.transform = '';
+				target.current.style.transition = '';
+			};
+
+			window.addEventListener( 'mouseup', cancel );
+			document.addEventListener( 'selectionchange', cancel );
+
+			target.current.style.transform = 'scale(1.02)';
+			target.current.style.transition = 'transform .75s ease-in-out';
+		},
+		[]
+	);
+
+	useOnLongPress(
+		target,
+		1000,
+		( _event ) => {
+			target.current.style.transform = '';
+			target.current.style.transition = '';
+
+			if (
+				! target.current.classList.contains( 'is-selected' ) ||
+				! window.getSelection().isCollapsed
+			) {
+				return;
+			}
+
+			const { parentNode } = target.current;
+
+			setIsDragging( true );
+			target.current.style.display = 'none';
+			window.getSelection().removeAllRanges();
+			parentNode.appendChild( container.current );
+			container.current.style.position = 'fixed';
+			container.current.style.pointerEvents = 'none';
+			container.current.style.left = _event.clientX - 20 + 'px';
+			container.current.style.top = _event.clientY + 20 + 'px';
+
+			const onMouseMove = ( event ) => {
+				const newEvent = new window.CustomEvent( 'dragover', {
+					bubbles: true,
+					detail: {
+						clientX: event.clientX,
+						clientY: event.clientY,
+					},
+				} );
+				window.dispatchEvent( newEvent );
+
+				container.current.style.left = event.clientX - 20 + 'px';
+				container.current.style.top = event.clientY + 20 + 'px';
+			};
+
+			const onMouseUp = ( event ) => {
+				window.removeEventListener( 'mousemove', onMouseMove );
+				window.removeEventListener( 'mouseup', onMouseUp );
+
+				setIsDragging( false );
+
+				const dataTransfer = new window.DataTransfer();
+				const data = {
+					type: 'block',
+					srcIndex: index,
+					srcClientId: clientId,
+					srcRootClientId: rootClientId || '',
+				};
+
+				dataTransfer.setData( 'text', JSON.stringify( data ) );
+
+				const newEvent = new window.DragEvent( 'drop', {
+					bubbles: true,
+					dataTransfer,
+				} );
+				event.target.dispatchEvent( newEvent );
+				parentNode.removeChild( container.current );
+
+				if ( target.current ) {
+					target.current.style.display = '';
+				}
+			};
+
+			window.addEventListener( 'mousemove', onMouseMove );
+			window.addEventListener( 'mouseup', onMouseUp );
+		},
+		[]
+	);
+
+	if ( ! isDraggging ) {
+		return null;
+	}
+
+	return createPortal(
+		<BlockDraggableChip clientIds={ [ clientId ] } />,
+		container.current
+	);
+}

packages/components/src/drop-zone/provider.js

@@ -59,6 +59,7 @@ class DropZoneProvider extends Component {
 
 		// Event listeners
 		this.onDragOver = this.onDragOver.bind( this );
+		this.onMouseUp = this.onMouseUp.bind( this );
 		this.onDrop = this.onDrop.bind( this );
 		// Context methods so this component can receive data from consumers
 		this.addDropZone = this.addDropZone.bind( this );
@@ -82,14 +83,19 @@ class DropZoneProvider extends Component {
 		};
 	}
 
+	onMouseUp() {
+		this.timeoutId = window.setTimeout( this.resetDragState );
+	}
+
 	componentDidMount() {
 		window.addEventListener( 'dragover', this.onDragOver );
-		window.addEventListener( 'mouseup', this.resetDragState );
+		window.addEventListener( 'mouseup', this.onMouseUp );
 	}
 
 	componentWillUnmount() {
 		window.removeEventListener( 'dragover', this.onDragOver );
-		window.removeEventListener( 'mouseup', this.resetDragState );
+		window.removeEventListener( 'mouseup', this.onMouseUp );
+		window.clearTimeout( this.timeoutId );
 	}
 
 	addDropZone( dropZone ) {