Drag & Drop

Allows movement of blocks, such as paragraph or tables, within the editor.

DraggableDnd Plugin
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate-common/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

功能

  • 在编辑器中拖放块以移动和插入内容。

安装

npm install @udecode/plate-dnd @udecode/plate-node-id react-dnd react-dnd-html5-backend

Usage

import { DndPlugin } from '@udecode/plate-dnd';
import { NodeIdPlugin } from '@udecode/plate-node-id';
 
const plugins = [
  // ...otherPlugins,
  NodeIdPlugin,
  DndPlugin,
];

然后，用 Draggable 包装您的插件组件。

插件

DndPlugin

Options

Collapse all

    启用滚动功能。

    Scroller 组件的属性。

    当前拖放目标状态，包含目标元素 ID 和拖放线方向。 内部状态。

API

focusBlockStartById

通过 ID 选择块的开始位置并聚焦编辑器。

Parameters

Collapse all

    编辑器实例。

    要聚焦的块的 ID。

getBlocksWithId

返回具有 ID 的块数组。

Parameters

Collapse all

    编辑器实例。

    获取节点entry的选项。

Returns

Collapse all

    具有 ID 的块数组。

selectBlockById

Parameters

Collapse all

    编辑器实例。

    要选择的块的 ID。

API 插件

withDraggable

为组件增加可拖动行为。

Parameters

Collapse all

    要渲染的可拖动组件。

    要增加可拖动行为的组件。

API 组件

DndScroller

Scroller 组件的包装器，根据拖动状态条件渲染。

State

Collapse all

    指示滚动区域是否启用的标志。如果设置为 false，滚动功能将被禁用。

    滚动区域的高度，以像素为单位。

    滚动区域的堆叠顺序。具有较高 z-index 的元素会绘制在具有较低值的元素前面。

    滚动动作的最小强度（速度）。较高的值会使滚动动作更敏感。

    增加滚动速度的乘数。较高的值会导致更快的滚动。

    滚动容器 DOM 元素的引用。

    可以传递给滚动区域 div 元素的额外属性。

useDndNode

一个自定义 Hook，结合了 useDragNode 和 useDropNode hooks 来启用编辑器中节点的拖放功能。它为拖动的节点提供默认预览，可以自定义或禁用。

Parameters

Collapse all

Returns

Collapse all

    指示节点当前是否正在被拖动。

    指示拖动的节点当前是否在放置目标上方。

    应该分配给可拖动元素的拖动引用。

useDragNode

一个自定义 Hook，使用 react-dnd 的 useDrag hook 启用编辑器中节点的拖动功能。

Parameters

Collapse all

    编辑器实例。

    拖动行为的选项，包括要拖动的节点的唯一 ID。

useDraggable

一个管理节点可拖动状态的自定义 Hook。

Parameters

Collapse all

Returns

Collapse all

    拖动源连接器函数。

    元素当前是否正在被拖动。

    可拖动元素的引用。

useDropNode

一个启用在编辑器上放置节点的自定义 Hook。它使用 react-dnd 的 useDrop hook 来处理放置行为。

Parameters

Collapse all

    编辑器实例。

    放置行为的选项。

useDropLine

返回元素的当前放置线状态。

Parameters

Collapse all

Returns

Collapse all

    当前放置线方向。

DateEmoji