可拖动的

Draggable 是一个组件，提供设置跨浏览器（包括 IE）可自定义的拖拽图像以及拖拽事件传输数据的方法。它将拖拽手柄与待拖拽元素解耦：通过包裹将成为拖拽手柄的组件并提供要拖拽元素的 DOM ID 来使用它。

请注意，拖拽手柄需要声明 draggable="true" 属性，并将 Draggable 的 onDraggableStart 和 onDraggableEnd 事件处理程序分别绑定到其自身的 onDragStart 和 onDragEnd。Draggable 负责设置拖拽图像和传输数据的逻辑，但不关心创建实际的可拖拽 DOM 元素。

Props

该组件接受以下 props：

appendToOwnerDocument: boolean

是否将克隆的元素追加到 ownerDocument body 中。默认情况下，通过 ID 获取的元素会追加到元素的包装器中。

• Required: No
• Default: false

elementId: string

在拖拽时克隆的元素的 HTML id。

• Required: Yes

onDragEnd: ( event: DragEvent ) => void

拖拽结束时调用的函数。此回调接收来自 dragend 事件的 event 对象作为其第一个参数。

• Required: No
• Default: noop

onDragOver: ( event: DragEvent ) => void

当被拖拽的元素拖过有效放置目标时调用的函数。此回调接收来自 dragover 事件的 event 对象作为其第一个参数。

• Required: No
• Default: noop

onDragStart: ( event: DragEvent ) => void

拖拽开始时调用的函数。此回调接收来自 dragstart 事件的 event 对象作为其第一个参数。

• Required: No
• Default: noop

transferData: unknown

附加到拖放事件的任意数据对象。

• Required: Yes

Usage

import { Draggable, Panel, PanelBody } from '@wordpress/components';
import { Icon, more } from '@wordpress/icons';

const MyDraggable = () => (
    <div id="draggable-panel">
        <Panel header="Draggable panel">
            <PanelBody>
                <Draggable elementId="draggable-panel" transferData={ {} }>
                    { ( { onDraggableStart, onDraggableEnd } ) => (
                        <div
                            className="example-drag-handle"
                            draggable
                            onDragStart={ onDraggableStart }
                            onDragEnd={ onDraggableEnd }
                        >
                            <Icon icon={ more } />
                        </div>
                    ) }
                </Draggable>
            </PanelBody>
        </Panel>
    </div>
);

如果您也想调用自己的 dragstart / dragend 事件处理程序，可以将它们传递给 Draggable，它会在执行完自身逻辑后负责调用它们：

import { Draggable, Panel, PanelBody } from '@wordpress/components';
import { Icon, more } from '@wordpress/icons';

const MyDraggable = ( { onDragStart, onDragEnd } ) => (
    <div id="draggable-panel">
        <Panel header="Draggable panel">
            <PanelBody>
                <Draggable
                    elementId="draggable-panel"
                    transferData={ {} }
                    onDragStart={ onDragStart }
                    onDragEnd={ onDragEnd }
                >
                    { ( { onDraggableStart, onDraggableEnd } ) => (
                        <div
                            className="example-drag-handle"
                            draggable
                            onDragStart={ onDraggableStart }
                            onDragEnd={ onDraggableEnd }
                        >
                            <Icon icon={ more } />
                        </div>
                    ) }
                </Draggable>
            </PanelBody>
        </Panel>
    </div>
);