拖动

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

请注意，拖动手柄需要声明draggable=“true”属性并绑定拖动秒在DraggableStart上和在可拖动端事件处理程序在DragStart上和在拖动结束时分别是。拖动负责设置拖动图像和传输数据的逻辑，但不涉及创建可拖动的实际DOM元素。

道具

组件接受以下道具：

appendToOwnerDocument:布尔值

是否将克隆的元素附加到所有者文档车身。默认情况下，通过id来源的元素被附加到元素的包装器中。

• 必需：否
• 违约：假

elementId:string

拖动时要克隆的元素的HTML id。

• 必需：是

onDragEnd：（事件：DragEvent）=>无效

拖动结束时调用的函数。此回调接收事件对象德拉根德事件作为其第一个参数。

• 必需：否
• 违约：noop公司

onDragOver:（事件：DragEvent）=>无效

将要拖动的元素拖动到有效的拖放目标上时调用的函数。此回调接收事件对象德拉戈夫事件作为其第一个参数。

• 必需：否
• 违约：noop公司

onDragStart:（event:DragEvent）=>无效

拖动开始时调用的函数。此回调接收事件对象拖船事件作为其第一个参数。

• 必需：否
• 违约：noop公司

transferData:未知

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

• 必需：是

用法

从“@wordpress/components”导入{Draggable、Panel、PanelBody}；从“@wordpress/icons”导入{图标，更多}；const MyDraggable=（）=>(<div id=“draggable-panel”><面板标题=“可拖动面板”><面板正文><Draggable elementId=“Draggable-panel”transferData={{}}>{（{onDraggableStart，onDraggableEnd}）=>(<迪夫className=“example-draghandle”拖动onDragStart={onDraggableStart}onDragEnd={onDraggableEnd}>＜图标＝｛更多｝/＞</div>) }</可拖动></PanelBody></面板></div>);

万一你想自己打电话拖船/德拉根德事件处理程序，您可以将它们传递给拖动它会按照他们自己的名字给他们打电话：

从“@wordpress/components”导入{Draggable、Panel、PanelBody}；从“@wordpress/icons”导入{图标，更多}；const MyDraggable=（{onDragStart，onDragEnd}）=>(<div id=“draggable-panel”><面板标题=“可拖动面板”><面板正文><可拖动elementId=“draggable-panel”传输数据={{}}onDragStart={onDragStart}onDragEnd={onDragEnd}>{（{onDraggableStart，onDraggableEnd}）=>(<迪夫className=“example-draghandle”拖动onDragStart={onDraggableStart}onDragEnd={onDraggableEnd}><图标图标={more}/></div>) }</可拖动></PanelBody></面板></div>);