关于前端:深入解析React-DnD拖拽原理轻松掌握拖放技巧

咱们是袋鼠云数栈 UED 团队，致力于打造优良的一站式数据中台产品。咱们始终保持工匠精力，摸索前端路线，为社区积攒并流传教训价值。。

本文作者：霁明

一、背景

1、业务背景

业务中会有一些须要实现拖拽的场景，尤其是偏视觉方向以及挪动端较多。拖拽在肯定水平上能让交互更加便捷，能大大晋升用户体验。以业务核心子产品配置性能为例，产品模块通过拖拽来调整程序，确实会更加不便一些。

2、React DnD 介绍

援用官网介绍：
React DnD 是一组 React 实用程序，可帮忙您构建简单的拖放界面，同时放弃组件拆散。它非常适合 Trello 和 Storify 等应用程序，在应用程序的不同局部之间拖动能够传输数据，组件会依据拖放事件更改其外观和应用程序状态。
React-DnD 特点：

应用包裹及注入的形式使组件实现拖拽
可用于构建简单的拖放界面，同时放弃组件拆散
采纳单向数据流
抹平了不同浏览器平台的差别
可扩大可测试

反对触屏操作

二、应用形式

1、装置

装置 react-dnd, react-dnd-html5-backend

npm install react-dnd react-dnd-html5-backend

2、DndProvider

将须要拖拽的组件应用DndProvider进行包裹

import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import Container from '../components/container';

export default function App() {
return (
  <DndProvider backend={HTML5Backend}>
    <Container />
  </DndProvider>
);
}

看下Container组件，次要是治理数据，并渲染Card列表

function Container() {
// ...
return (
  <div style={{ width: 400 }}>
    {cards.map((card, index) => (
      <Card
        key={card.id}
        index={index}
        id={card.id}
        text={card.text}
        moveCard={moveCard}
      />
    ))}
  </div>
);
}

3、useDrag和useDrop

接下来看下Card组件，

import { useRef } from 'react';
import { useDrag, useDrop } from 'react-dnd';
import styles from '../styles/home.module.css';

function Card({ id, text, index, moveCard }: ICardProps) {
const ref = useRef<HTMLDivElement>(null);

const [{ handlerId }, drop] = useDrop({
  accept: CARD,
  collect(monitor) {
    return {
      handlerId: monitor.getHandlerId(),
    };
  },
  hover(item: IDragItem, monitor) {
    if (!ref.current) {
      return;
    }
    const dragIndex = item.index;
    const hoverIndex = index;
    // ...
    // 更新元素的地位
    moveCard(dragIndex, hoverIndex);
    // ...
  },
});

const [{ isDragging }, drag] = useDrag({
  type: CARD,
  item: { id, index },
  collect: (monitor: any) => ({
    isDragging: monitor.isDragging(),
  }),
});

drag(drop(ref));
const opacity = isDragging ? 0 : 1;

return (
  <div
    ref={ref}
    className={styles.card}
    style={{ opacity }}
    data-handler-id={handlerId}
  >
    {text}
  </div>
);
}

至此一个简略的拖拽排序列表就实现了，实现的成果相似于React DnD官网的这个示例：https://react-dnd.github.io/react-dnd/examples/sortable/simple，接下来咱们来看看实现原理。

三、原理解析

1、总体架构

次要代码代码目录构造

外围代码次要分三个局部：

dnd-core：外围逻辑，定义了拖拽接口、治理形式、数据流向
backend：形象进去的后端概念，次要解决DOM事件
react-dnd：封装React组件，提供api，相当于接入层

外围实现原理：
dnd-core向backend提供数据的更新办法，backend在拖拽时更新dnd-core中的数据，dnd-core通过react-dnd更新业务组件。

2、DndProvider

先看一下源码

/**
 * A React component that provides the React-DnD context
 */
export const DndProvider: FC<DndProviderProps<unknown, unknown>> = memo(
  function DndProvider({ children, ...props }) {
    const [manager, isGlobalInstance] = getDndContextValue(props) // memoized from props
    // ...
    return <DndContext.Provider value={manager}>{children}</DndContext.Provider>
  },
)

从以上代码能够看出，生成了一个manager，并将其放到DndContext.Provider中。先看下DndContext的代码：

import { createContext } from 'react'
// ...
export const DndContext = createContext<DndContextType>({
  dragDropManager: undefined,
})

就是应用 React 的createContext创立的上下文容器组件。

接下来看下这个manager，次要是用来管制拖拽行为，通过Provider让子节点也能够拜访。咱们看下创立manager的getDndContextValue办法：

import type { BackendFactory, DragDropManager } from 'dnd-core'
import { createDragDropManager } from 'dnd-core'
// ...
function getDndContextValue(props: DndProviderProps<unknown, unknown>) {
  if ('manager' in props) {
     const manager = { dragDropManager: props.manager }
     return [manager, false]
  }

   const manager = createSingletonDndContext(
     props.backend,
     props.context,
     props.options,
     props.debugMode,
    )
   const isGlobalInstance = !props.context

   return [manager, isGlobalInstance]
}

function createSingletonDndContext<BackendContext, BackendOptions>(
   backend: BackendFactory,
   context: BackendContext = getGlobalContext(),
   options: BackendOptions,
   debugMode?: boolean,
) {
   const ctx = context as any
   if (!ctx[INSTANCE_SYM]) {
     ctx[INSTANCE_SYM] = {
       dragDropManager: createDragDropManager(
        backend,
    context,
    options,
    debugMode,
       ),
     }
   }
   return ctx[INSTANCE_SYM]
}

从以上代码能够看出，getDndContextValue办法又调用了createSingletonDndContext办法，并传入了backend、context、options、debugMode这几个属性，而后通过dnd-core中的createDragDropManager来创立manager。

3、DragDropManager

看下createDragDropManager.js中的次要代码

import type { Store } from 'redux'
import { createStore } from 'redux'
// ...
import { reduce } from './reducers/index.js'

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(debugMode: boolean): Store<State> {
  // ...
  return createStore(
    reduce,
    debugMode &&
    reduxDevTools &&
    reduxDevTools({
      name: 'dnd-core',
      instanceId: 'dnd-core',
    }),
  )
}

能够看到应用了redux的createStore创立了store，并创立了monitor和manager实例，通过backendFactory创立backend后端实例并装置到manager总实例。

看一下DragDropManagerImpl的次要代码

export class DragDropManagerImpl implements DragDropManager {
  private store: Store<State>
  private monitor: DragDropMonitor
  private backend: Backend | undefined
  private isSetUp = false

  public constructor(store: Store<State>, monitor: DragDropMonitor) {
    this.store = store
    this.monitor = monitor
    store.subscribe(this.handleRefCountChange)
   }

   // ...

  public getActions(): DragDropActions {
  /* eslint-disable-next-line @typescript-eslint/no-this-alias */
    const manager = this
    const { dispatch } = this.store

    function bindActionCreator(actionCreator: ActionCreator<any>) {
      return (...args: any[]) => {
        const action = actionCreator.apply(manager, args as any)
        if (typeof action !== 'undefined') {
          dispatch(action)
        }
      }
  }

  const actions = createDragDropActions(this)

  return Object.keys(actions).reduce(
    (boundActions: DragDropActions, key: string) => {
      const action: ActionCreator<any> = (actions as any)[
        key
      ] as ActionCreator<any>
      ;(boundActions as any)[key] = bindActionCreator(action)
        return boundActions
      },
      {} as DragDropActions,
    )
  }

  public dispatch(action: Action<any>): void {
    this.store.dispatch(action)
  }

  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
      }
    }
  }
}

先说一下这个handleRefCountChange办法，在构造函数里通过store进行订阅，在第一次应用useDrop或useDrag时会执行setup办法初始化backend，在拖拽源和搁置源都被卸载时则会执行teardown销毁backend。

接下来看一下createDragDropActions办法

export function createDragDropActions(
  manager: DragDropManager,
): DragDropActions {
  return {
    beginDrag: createBeginDrag(manager),
    publishDragSource: createPublishDragSource(manager),
    hover: createHover(manager),
    drop: createDrop(manager),
    endDrag: createEndDrag(manager),
  }
}

能够看到绑定一些action：

beginDrag（开始拖动）
publishDragSource（公布以后拖动源）
hover（是否通过）
drop（落下动作）
endDrag（拖拽完结）

manager蕴含了之前生成的 monitor、store、backend，manager 创立实现，示意此时咱们有了一个 store 来治理拖拽中的数据，有了 monitor 来监听数据和管制行为，能通过 manager 进行注册，能够通过 backend 将 DOM 事件转换为 action。接下来便能够注册拖拽源和搁置源了。

4、useDrag

/**
 * useDragSource hook
 * @param sourceSpec The drag source specification (object or function, function preferred)
 * @param deps The memoization deps array to use when evaluating spec changes
 */
export function useDrag<
  DragObject = unknown,
  DropResult = unknown,
  CollectedProps = unknown,
>(
  specArg: FactoryOrInstance<
    DragSourceHookSpec<DragObject, DropResult, CollectedProps>
  >,
  deps?: unknown[],
): [CollectedProps, ConnectDragSource, ConnectDragPreview] {
  const spec = useOptionalFactory(specArg, deps)
  invariant(
    !(spec as any).begin,
    'useDrag::spec.begin was deprecated in v14. Replace spec.begin() with spec.item(). (see more here - https://react-dnd.github.io/react-dnd/docs/api/use-drag)',
  )

  const monitor = useDragSourceMonitor<DragObject, DropResult>()
  const connector = useDragSourceConnector(spec.options, spec.previewOptions)
  useRegisteredDragSource(spec, monitor, connector)

  return [
    useCollectedProps(spec.collect, monitor, connector),
    useConnectDragSource(connector),
    useConnectDragPreview(connector),
  ]
}

能够看到useDrag办法返回了一个蕴含3个元素的数组，CollectedProps（collect办法返回的对象）、ConnectDragSource（拖拽源连接器）、ConnectDragPreview（拖拽源预览）。

monitor是从后面Provider中的manager中获取的，次要看下connector

export function useDragSourceConnector(
  dragSourceOptions: DragSourceOptions | undefined,
  dragPreviewOptions: DragPreviewOptions | undefined,
): SourceConnector {
  const manager = useDragDropManager()
  const connector = useMemo(
    () => new SourceConnector(manager.getBackend()),
    [manager],
  )
  // ...
  return connector
}

能够看到connector获取了manager.getBackend后端的数据。

useRegisteredDragSource办法会对拖动源进行注册，会保留拖动源实例，并记录注册的数量。

5、useDrop

看下useDrop源码

/**
 * useDropTarget Hook
 * @param spec The drop target specification (object or function, function preferred)
 * @param deps The memoization deps array to use when evaluating spec changes
 */
export function useDrop<
  DragObject = unknown,
  DropResult = unknown,
  CollectedProps = unknown,
>(
  specArg: FactoryOrInstance<
    DropTargetHookSpec<DragObject, DropResult, CollectedProps>
  >,
  deps?: unknown[],
): [CollectedProps, ConnectDropTarget] {
  const spec = useOptionalFactory(specArg, deps)
  const monitor = useDropTargetMonitor<DragObject, DropResult>()
  const connector = useDropTargetConnector(spec.options)
  useRegisteredDropTarget(spec, monitor, connector)

  return [
    useCollectedProps(spec.collect, monitor, connector),
    useConnectDropTarget(connector),
  ]
}

useDrop返回了一个蕴含2个元素的数组，CollectedProps（collect办法返回的对象）, ConnectDropTarget（搁置源连接器），monitor和connector的获取都和useDrag相似。

6、HTML5Backend

HTML5Backend应用了HTML5 拖放 API，先理解下HTML拖拽事件：

一个简略拖拽操作过程，会顺次触发拖拽事件：dragstart -> drag -> dragenter -> dragover (-> dragleave) -> drop -> dragend。

drag事件会在dragstar触发后继续触发，直至drop。

dragleave事件会在拖拽元素来到一个可开释指标时触发。

接下来介绍一下HTML5Backend，是React DnD 次要反对的后端，应用HTML5 拖放 API，它会截取拖动的 DOM 节点并将其用作开箱即用的“拖动预览”。React DnD 中以可插入的形式实现 HTML5 拖放反对，能够依据触摸事件、鼠标事件或其余齐全不同的事件编写不同的实现，这种可插入的实现在 React DnD 中称为后端。官网提供了HTML5Backend和TouchBackend，别离用来反对web端和挪动端。

后端负责与 React 的合成事件零碎相似的角色：它们形象出浏览器差别并解决原生DOM 事件。只管有相似之处，但 React DnD 后端并不依赖于 React 或其合成事件零碎。在后盾，后端所做的就是将 DOM 事件转换为 React DnD 能够解决的外部 Redux 操作。

后面给DndProvider传递的HTML5backend，看一下其代码实现：

export const HTML5Backend: BackendFactory = function createBackend(
  manager: DragDropManager,
  context?: HTML5BackendContext,
  options?: HTML5BackendOptions,
): HTML5BackendImpl {
  return new HTML5BackendImpl(manager, context, options)
}

能够看到其实是个返回HTML5BackendImpl实例的函数，在创立manager实例时会执行createBackend办法创立真正的backend。

如下是 Backend 须要被实现的办法：

export interface Backend {
  setup(): void
  teardown(): void
  connectDragSource(sourceId: any, node?: any, options?: any): Unsubscribe
  connectDragPreview(sourceId: any, node?: any, options?: any): Unsubscribe
  connectDropTarget(targetId: any, node?: any, options?: any): Unsubscribe
  profile(): Record<string, number>
}

setup 是 backend 的初始化办法，teardown 是 backend 销毁办法。connectDragSource办法将元素转换为可拖拽元素，并增加监听事件。connectDropTarget办法会给元素增加监听事件，connectDragPreview办法会将preview元素保留以供监听函数应用，profile办法用于返回一些简要的统计信息。

以上这几个办法都在HTML5BackendImpl中，咱们先看一下setup办法：

public setup(): void {
  const root = this.rootElement as RootNode | undefined
  if (root === undefined) {
    return
  }

  if (root.__isReactDndBackendSetUp) {
    throw new Error('Cannot have two HTML5 backends at the same time.')
  }
  root.__isReactDndBackendSetUp = true
  this.addEventListeners(root)
}

root默认是windows，通过addEventListeners办法把监听事件都绑定到windows上，这进步了性能也升高了事件销毁的难度。

看下addEventListeners办法：

private addEventListeners(target: Node) {
  if (!target.addEventListener) {
    return
  }
  target.addEventListener(
    'dragstart',
    this.handleTopDragStart as EventListener,
  )
  target.addEventListener('dragstart', this.handleTopDragStartCapture, true)
  target.addEventListener('dragend', this.handleTopDragEndCapture, true)
  target.addEventListener(
    'dragenter',
    this.handleTopDragEnter as EventListener,
  )
  target.addEventListener(
    'dragenter',
    this.handleTopDragEnterCapture as EventListener,
    true,
  )
  target.addEventListener(
    'dragleave',
    this.handleTopDragLeaveCapture as EventListener,
    true,
  )
  target.addEventListener('dragover', this.handleTopDragOver as EventListener)
  target.addEventListener(
    'dragover',
    this.handleTopDragOverCapture as EventListener,
    true,
  )
  target.addEventListener('drop', this.handleTopDrop as EventListener)
  target.addEventListener(
    'drop',
    this.handleTopDropCapture as EventListener,
    true,
  )
}

以上代码中监听了一些拖拽事件，这些监听函数会取得拖拽事件的对象、拿到相应的参数，并执行相应的action办法。HTML5Backend 通过 manager 拿到一个 DragDropActions 的实例，执行其中的办法。DragDropActions 实质就是依据参数将其封装为一个 action，最终通过 redux 的 dispatch 将 action 散发，扭转 store 中的数据。

export interface DragDropActions {
  beginDrag(
    sourceIds?: Identifier[],
    options?: any,
  ): Action<BeginDragPayload> | undefined
    publishDragSource(): SentinelAction | undefined
    hover(targetIds: Identifier[], options?: any): Action<HoverPayload>
    drop(options?: any): void
    endDrag(): SentinelAction
}

最初咱们再看下connectDragSource办法：

public connectDragSource(
  sourceId: string,
  node: Element,
  options: any,
): Unsubscribe {
  // ...
  node.setAttribute('draggable', 'true')
  node.addEventListener('dragstart', handleDragStart)
  node.addEventListener('selectstart', handleSelectStart)

  return (): void => {
    // ...
    node.removeEventListener('dragstart', handleDragStart)
    node.removeEventListener('selectstart', handleSelectStart)
    node.setAttribute('draggable', 'false')
  }
}

能够看到次要是把节点的draggable属性设置为true，并增加监听事件，返回一个Unsubscribe函数用于执行销毁。

综上，HTML5Backend 在初始化的时候在 window 对象上绑定拖拽事件的监听函数，拖拽事件触发时执行对应action，更新 store 中的数据，实现由 Dom 事件到数据的转变。

7、TouchBackend

HTML5 后端不反对触摸事件，因而它不适用于平板电脑和挪动设施。能够应用react-dnd-touch-backend来反对触摸设施，简略看下ToucheBackend。

ToucheBackend次要是为了反对挪动端，也反对web端，在web端能够应用 mousedown、mousemove、mouseup，在挪动端则应用 touchstart、touchmove、touchend，上面是ToucheBackend中对事件的定义：

const eventNames: Record<ListenerType, EventName> = {
  [ListenerType.mouse]: {
    start: 'mousedown',
    move: 'mousemove',
    end: 'mouseup',
    contextmenu: 'contextmenu',
  },
  [ListenerType.touch]: {
    start: 'touchstart',
    move: 'touchmove',
    end: 'touchend',
  },
  [ListenerType.keyboard]: {
    keydown: 'keydown',
  },
}

8、次要拖拽过程

四、总结

React-DnD 采纳了分层设计，react-dnd充当接入层，dnd-core实现拖拽接口、定义拖拽行为、治理数据流向，backend将DOM事件通过redux action转换为数据。

应用可插入的形式引入backend，使拖拽的实现可扩大且更加灵便。

应用了单向数据流，在拖拽时不必解决中间状态，不必额定对DOM事件进行解决，只需专一于数据的变动。
React-DnD对backend的实现形式、数据的治理形式，以及整体的设计都值得借鉴。

五、参考链接：

https://github.com/react-dnd/react-dnd/
https://react-dnd.github.io/react-dnd
https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API
https://zhuanlan.zhihu.com/p/429986799
https://juejin.cn/post/6885511137236877325

最初

欢送关注【袋鼠云数栈UED团队】~
袋鼠云数栈UED团队继续为宽广开发者分享技术成绩，相继参加开源了欢送star

大数据分布式任务调度零碎——Taier
轻量级的 Web IDE UI 框架——Molecule
针对大数据畛域的 SQL Parser 我的项目——dt-sql-parser
袋鼠云数栈前端团队代码评审工程实际文档——code-review-practices
一个速度更快、配置更灵便、应用更简略的模块打包器——ko

关于前端:深入解析React-DnD拖拽原理轻松掌握拖放技巧

一、背景

1、业务背景

2、React DnD 介绍

二、应用形式

1、装置

2、DndProvider

3、useDrag和useDrop

三、原理解析

1、总体架构

2、DndProvider

3、DragDropManager

4、useDrag

5、useDrop

6、HTML5Backend

7、TouchBackend

8、次要拖拽过程

四、总结

五、参考链接：

最初

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:深入解析React-DnD拖拽原理轻松掌握拖放技巧

一、背景

1、业务背景

2、React DnD 介绍

二、应用形式

1、装置

2、DndProvider

3、useDrag和useDrop

三、原理解析

1、总体架构

2、DndProvider

3、DragDropManager

4、useDrag

5、useDrop

6、HTML5Backend

7、TouchBackend

8、次要拖拽过程

四、总结

五、参考链接：

最初

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复