React DnD如何处理拖拽详解_React_

___________ ___________ _______________ | | | | | | | | | | | backend-html | | react-dnd | | dnd-core | | | | | | | | backend-touch | |___________| |___________| |_______________| 

import { HTML5Backend } from 'react-dnd-html5-backend'; import { DndProvider } from 'react-dnd'; 

export const DndProvider: FC> = memo( function DndProvider({ children, ...props }) { const [manager, isGlobalInstance] = getDndContextValue(props) ... return {children} }, ) 

export function createDragDropManager( backendFactory: BackendFactory, globalContext: unknown = undefined, backendOptions: unknown = {}, debugMode = false, ): DragDropManager { const store = makeStoreInstance(debugMode) const monitor = new DragDropMonitorImpl(store, new HandlerRegistryImpl(store)) const manager = new DragDropManagerImpl(store, monitor) const backend = backendFactory(manager, globalContext, backendOptions) manager.receiveBackend(backend) return manager } 

function makeStoreInstance(): Store { return createStore(reduce) } 

export interface State { dirtyHandlerIds: DirtyHandlerIdsState dragOffset: DragOffsetState refCount: RefCountState dragOperation: DragOperationState stateId: StateIdState } 

export function reduce( state: State = initialState, action: Action<{ sourceClientOffset: XYCoord clientOffset: XYCoord }>, ): State { const { payload } = action switch (action.type) { case INIT_COORDS: case BEGIN_DRAG: return { initialSourceClientOffset: payload.sourceClientOffset, initialClientOffset: payload.clientOffset, clientOffset: payload.clientOffset, } case HOVER: ... case END_DRAG: case DROP: return initialState default: return state } } 

export interface DragDropMonitor { subscribeToStateChange( listener: Listener, options?: { handlerIds: Identifier[] | undefined }, ): Unsubscribe subscribeToOffsetChange(listener: Listener): Unsubscribe canDragSource(sourceId: Identifier | undefined): boolean canDropOnTarget(targetId: Identifier | undefined): boolean isDragging(): boolean isDraggingSource(sourceId: Identifier | undefined): boolean getItemType(): Identifier | null getItem(): any getSourceId(): Identifier | null getTargetIds(): Identifier[] getDropResult(): any didDrop(): boolean ... } 

public subscribeToStateChange( listener: Listener, options: { handlerIds: string[] | undefined } = { handlerIds: undefined }, ): Unsubscribe { ... return this.store.subscribe(handleChange) } 

export class DragDropManagerImpl implements DragDropManager { private store: Store private monitor: DragDropMonitor private backend: Backend | undefined private isSetUp = false public constructor(store: Store, monitor: DragDropMonitor) { this.store = store this.monitor = monitor store.subscribe(this.handleRefCountChange) } ... private handleRefCountChange = (): void => { const shouldSetUp = this.store.getState().refCount > 0 if (this.backend) { if (shouldSetUp && !this.isSetUp) { this.backend.setup() this.isSetUp = true } else if (!shouldSetUp && this.isSetUp) { this.backend.teardown() this.isSetUp = false } } } } 

import { DragPreviewImage, useDrag } from 'react-dnd'; export const Knight: FC = () => { const [{ isDragging }, drag, preview] = useDrag( () => ({ type: ItemTypes.KNIGHT, collect: (monitor) => ({ isDragging: !!monitor.isDragging() }) }), [] ); return ( <>
 ♘ 
 ); }; 

export function useDrag( specArg: FactoryOrInstance< DragSourceHookSpec >, deps?: unknown[], ): [CollectedProps, ConnectDragSource, ConnectDragPreview] { // 获得配置参数 const spec = useOptionalFactory(specArg, deps) // 获得 manager 中的 monitor 的包装对象（DragSourceMonitor） const monitor = useDragSourceMonitor() // 连接 dom 以及 redux const connector = useDragSourceConnector(spec.options, spec.previewOptions) // 生成唯一 id，封装 DragSource 对象 useRegisteredDragSource(spec, monitor, connector) return [ useCollectedProps(spec.collect, monitor, connector), useConnectDragSource(connector), useConnectDragPreview(connector), ] } 

export function useDragSourceMonitor(): DragSourceMonitor { const manager = useDragDropManager() return useMemo(() => new DragSourceMonitorImpl(manager), [manager]) } 

export interface Connector { // 获得 ref 指向的 Dom hooks: any // 获得 dragSource connectTarget: any // dragSource 唯一 Id receiveHandlerId(handlerId: Identifier | null): void // 重新连接 dragSource 和 dom reconnect(): void } 

export function useConnectDragSource(connector: SourceConnector) { return useMemo(() => connector.hooks.dragSource(), [connector]) } 

export class SourceConnector implements Connector { // wrapCon
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：uniapp获取底部安全距离以及状态栏高度等_javascript技巧_
                                                                
下一篇：react-dnd API拖拽工具详细用法示例_React_