function makeDraggable<TData = unknown>( target: MaybeElementRef, options?: DraggableOptions<TData>,): DraggableReturn;要素をドラッグ可能にします。デフォルトは自由なドラッグです。並べ替え可能なリストはこの上に作られています。
const el = useTemplateRef<HTMLElement>('el');
const { isDragging } = makeDraggable(el, { id: 'card', type: 'card', data: { title } });
ドラッグ＆ドロップを参照してください。並べ替え可能なアイテムもドラッグ可能な要素です：makeSortableItem は同じオプションに加えて、さらに多くのオプションを受け付けます。
デモを読み込み中…
<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import DragCard from './DragCard.vue';
</script>
<template>
<!-- No drop target here: let go, and each card goes back where it was. -->
<DnDProvider>
<div class="cards">
<DragCard title="Grab it anywhere" code="makeDraggable(el)" />
<DragCard title="Grab the handle" code="{ handle: grip }" handle />
<DragCard title="It moves itself" code="{ overlay: false }" self />
<DragCard title="Not now" code="{ disabled: true }" disabled />
</div>
</DnDProvider>
</template>
<style scoped>
.cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 220px));
gap: 14px;
}
@media (max-width: 480px) {
.cards {
grid-template-columns: minmax(0, 1fr);
}
}
</style>オプション
makeDraggable のオプション。canDrag 以外のすべてのオプションは値、ref、ゲッター（overlay、dropAnimation：値または ref）を受け付け、必要になったときに読み取られるため、変更は遅くとも次のドラッグから反映されます。
Key値 · ref · ゲッター安定した id。要素が再利用される仮想リストでは、ゲッターを渡してください。デフォルト：useId()。サーバーとクライアントの描画間で安定していますが、コンポーネントのインスタンスごとに新しくなります。
TData値 · ref · ゲッタードラッグに運ばせたい任意のデータ：イベントとドロップターゲットは active.data として読み取ります。
string値 · ref · ゲッター人が呼ぶ名前：スクリーンリーダー向けのテキストは id の代わりにこれを読み上げます（Picked up Tomato）。イベントでは active.label と items に入ります。
string | string[]値 · ref · ゲッターこの要素の型（1 つまたは複数）。ドロップターゲットの accept ルールと照合されます。指定しなければ、どのターゲットにも合います。
boolean値 · ref · ゲッターtrue：ドラッグできません（aria-disabled を示します）。
MaybeElement | string値 · ref · ゲッタードラッグ可能な要素の中でドラッグを始める要素またはセレクター（属性もこちらに付きます）。
ActivationOptions値 · ref · ゲッタープロバイダーの activation を上書きします。押下の開始時に読み取られます。
(event: PointerEvent | KeyboardEvent) => boolean追加の関門。たとえば、キーを押している間だけドラッグできるようにします。
boolean | Component値 · reftrue（デフォルト）：オーバーレイがポインターに追従し、プロバイダーの #overlay スロットか要素のクローンで描画されます。コンポーネント：オーバーレイはそれを OverlayProps で描画し、スロットより優先されます。false：オーバーレイはなく、返される transform によって要素自体が動きます。値または ref（関数は関数型コンポーネントなので、(props) => <Card {...props} /> も使えます）。オーバーレイがあるかどうかはドラッグの開始時に決まります。ドラッグ中に切り替えた ref は、すぐにコンポーネントを入れ替えます（プロバイダーの overlayTransition を参照）。ドラッグがドロップターゲットの上にある間は、そのターゲットの overOverlay が優先されます。クローンからは、UI キットの押下エフェクト（リップル）と、中にある data-dnd-no-clone が付いた要素が除外されます。
DropAnimation値 · refこの要素のドラッグが終わったときのオーバーレイの着地の仕方で、プロバイダーの dropAnimation の代わりに使われます。ドロップターゲットの overDropAnimation が優先されます。値または ref（関数はアニメーション）で、ドロップ時に読み取られます。
Modifier[]値 · ref · ゲッターここで始まるドラッグのモディファイア。プロバイダーの modifiers の後に適用されます：たとえば、ほかのドラッグは自由に動くページで、1 つの要素だけに [restrictToVerticalAxis] を付ける場合。ドラッグの開始時に読み取られます。
'x' | 'y'値 · ref · ゲッターここで始まるドラッグを 1 つの軸に固定します：'x' は横方向にだけ、'y' は縦方向にだけ動きます。固定は modifiers の後に来るため（restrictToHorizontalAxis / restrictToVerticalAxis を最後に置いたのと同じ）、モディファイアが何をしても保たれます。ドラッグの開始時に読み取られます。
'pixels' | 'droppables'値 · ref · ゲッター自由なドラッグでの矢印キー：ピクセル単位で動かす（デフォルト）か、受け入れるドロップターゲットの間をジャンプするか。矢印キーを押すたびに読み取られます。
boolean値 · ref · ゲッターrole/tabindex/aria-* 属性を設定します（デフォルトは true）。ユーザー自身の設定を上書きすることはありません。プロバイダーの操作説明の id は、既存の aria-describedby に 1 つのトークンとして加わり（同じ要素にある UI キットのツールチップは自分のものを保ちます）、取り除かれるのはそのトークンだけです。ライブに反映：オフにすると、ライブラリが設定したものが取り除かれます。
boolean | NativeDragOptions値 · ref · ゲッターこの要素のマウスドラッグはブラウザー自身のドラッグになり、ページの外へ出られます：デスクトップへ、別のアプリやタブへ、アプリの別のウィンドウへ。ページ上ではいつもどおりに動きます（ターゲット、場所を空けるリスト）が、オーバーレイの代わりにブラウザーがドラッグ中の画像を描きます。タッチとキーボードのドラッグはライブラリのドラッグのままです。true は label をテキストとして運びます。押下の開始時に読み取られます。canDrag は押下時に確認されます。マウスがどれだけ動いたらドラッグが始まるかはブラウザーが決めます（activation は適用されません）。
返り値
makeDraggable が返すもの。
ComputedRef<Key>ドラッグ可能な要素の id：id オプション、または自動で作られた id。
ComputedRef<boolean>ドラッグされている（マルチドラッグのほかのアイテムとしても）か、オーバーレイがまだ着地中です。
ComputedRef<Coordinates | null>overlay: false のときに適用するオフセット。ドラッグのオフセットから、要素を含むコンテンツが開始以降に動いた分（ページやコンテナーのスクロール）を差し引いたもので、これにより要素はポインターの下にとどまります。
WritableComputedRef<boolean>プロバイダーの選択に含まれています：選択中のアイテムを 1 つドラッグすると全部を運びます。値を設定すると選択・選択解除できます。
ページの外へ
native のドラッグがページの外へ運ぶもの。ファイルとほかのアプリを参照してください。
マウスでページの外へドラッグできるドラッグ可能な要素や並べ替え可能なアイテム（native）：デスクトップへ、別のアプリへ、別のタブへ、アプリの別のウィンドウへ。
(active: Active) => Record<string, string>ほかのアプリやページが受け取るもの：MIME タイプごとのテキスト。形式は { 'text/plain': title, 'text/uri-list': url }。ドラッグの開始時に読み取られます。並べ替え可能なアイテムは、アプリの別のウィンドウにある同じグループのリストのために、自分自身も運びます。
'copy' | 'move' | 'link' | 'copyMove' | 'copyLink' | 'linkMove' | 'all'ドラッグがドロップ先に許可すること（effectAllowed）。デフォルトは 'copyMove'：移動ならアイテムはこちらのリストから取り除かれ、コピーなら残ります。