ドキュメント/API

共通の型

どの API ページからも参照される小さな型。キー、座標、矩形、要素の参照、リアクティブなオプション。

このページを編集

このページは AI によって翻訳されており、不正確な箇所が含まれている可能性があります。 英語の原文を読む

リアクティブなオプション

ほとんどのオプションは値、ref、ゲッターを受け付け、必要になったときに読み取られます:変更は遅くとも次のドラッグから反映されます。表ではこれらに 値 · ref · ゲッター と記しています。

値、ゲッター、または任意の ref(書き込み可能、shallow、computed、readonly。たとえば useTemplateRef から得たもの)で、ライブラリは読み取るだけです。Vue の MaybeRefOrGetter と違い、string | number が期待される場所で Ref<string> を受け付けます。

type MaybeReadonlyRefOrGetter = T | Readonly<Ref<T>> | (() => T)

値または任意の ref。関数そのものが値になるオプション(オーバーレイコンポーネント、accept ルール、カスタムアニメーション)向けで、そのためゲッターとは区別できません。コンポーネントは shallowRef(または computed)で保持してください:Vue がそれらをリアクティブにしてはいけません。

type MaybeReadonlyRef = T | Readonly<Ref<T>>

要素

コンポーザブルが対象とする要素(makeDraggable(target)):要素そのもの、テンプレート参照(useTemplateRef)、またはゲッター。変わってもかまいません(v-if):ライブラリが追従します。

type MaybeElementRef = MaybeReadonlyRefOrGetter<MaybeElement>

要素:HTML または SVG の要素、あるいはコンポーネントインスタンス(そのルート要素 $el)。テンプレート参照が返すものと同じです。要素がない間(まだマウントされていない)は null または undefined。

type MaybeElement = | HTMLElement | SVGElement | ComponentRef | null | undefined

キーと幾何

id またはキー:ドラッグ可能な要素、ドロップターゲット、リスト、リストのアイテムのもの。

type Key = string | number

点またはオフセット(px):ビューポートの左上隅からの位置、またはドラッグの開始位置からのオフセット(delta、transform)。

number

水平方向。右に向かって増えます。

number

垂直方向。下に向かって増えます。

幅と高さ(px)。

number

幅(px)。

number

高さ(px)。

ビューポート座標でのボックス(px)。getBoundingClientRect() が返すものと同じです。

number

上端。ビューポートの上端からの距離です。

number

左端。ビューポートの左端からの距離です。

number

幅。

number

高さ。

number

右端。ビューポートの左端からの距離です:left + width。

number

下端。ビューポートの上端からの距離です:top + height。

ステータス

プロバイダーが何をしているか:

  • 'idle':何もしていません。
  • 'activating':押下がアクティベーション制約(距離、長押し)を満たすのを待っています。
  • 'dragging':ドラッグ中です。
  • 'dropping':ドロップを確定しているところ(非同期の onBeforeDrop)か、オーバーレイがまだ着地中です。
  • 'selecting':選択エリアが枠を描いています。
type DnDStatus = | 'idle' | 'activating' | 'dragging' | 'dropping' | 'selecting'

ドラッグがどう動くか。どのセンサーが操作していても同じです(SensorActivation.type):'pointer' は座標を追い、'keyboard' はアイテム単位で動きます。

type SensorType = 'pointer' | 'keyboard'

押下したポインターの種類(PointerEvent.pointerType):アクティベーションは種類ごとに設定します。

type PointerKind = 'mouse' | 'touch' | 'pen'

値、またはその promise:非同期になりうるフックが返すもの(onBeforeDrop)。

type MaybePromise = T | Promise<T>