Draggable

プロパティ

コンポーネントは以下のプロパティを受け入れます:

appendToOwnerDocument: boolean

クローンされた要素を ownerDocument のボディに追加するかどうか。デフォルトでは、IDから取得された要素は要素のラッパーに追加されます。

• 必須: いいえ
• デフォルト: false
  

elementId: string

ドラッグ時にクローンする要素のHTML ID。

• 必須: はい
  

onDragEnd: ( event: DragEvent ) => void

ドラッグが終了したときに呼び出される関数。このコールバックは、最初のパラメータとして event オブジェクトを dragend イベントから受け取ります。

• 必須: いいえ
• デフォルト: noop
  

onDragOver: ( event: DragEvent ) => void

ドラッグされている要素が有効なドロップターゲットの上にドラッグされたときに呼び出される関数。このコールバックは、最初のパラメータとして event オブジェクトを dragover イベントから受け取ります。

• 必須: いいえ
• デフォルト: noop
  

onDragStart: ( event: DragEvent ) => void

ドラッグが開始されたときに呼び出される関数。このコールバックは、最初のパラメータとして event オブジェクトを dragstart イベントから受け取ります。

• 必須: いいえ
• デフォルト: noop
  

transferData: unknown

ドラッグアンドドロップイベントに添付された任意のデータオブジェクト。

• 必須: はい
  

使用法

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>
);