[{"data":1,"prerenderedAt":1683},["ShallowReactive",2],{"navigation-source":3,"navigation-ja":271,"docs-\u002Fja\u002Fdocs\u002Fguides\u002Fdevtools":474,"docs-surround-\u002Fja\u002Fdocs\u002Fguides\u002Fdevtools":1678},[4],{"title":5,"path":6,"stem":7,"children":8,"page":35},"Docs","\u002Fdocs","docs",[9,36,122,198,251],{"title":10,"icon":11,"path":12,"stem":13,"children":14,"page":35},"Getting started","i-lucide-rocket","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[15,20,25,30],{"title":16,"path":17,"stem":18,"icon":19},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction","i-lucide-book-open",{"title":21,"path":22,"stem":23,"icon":24},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation","i-lucide-download",{"title":26,"path":27,"stem":28,"icon":29},"Quick start","\u002Fdocs\u002Fgetting-started\u002Fquick-start","docs\u002F1.getting-started\u002F3.quick-start","i-lucide-zap",{"title":31,"path":32,"stem":33,"icon":34},"Migrating from v2","\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2","docs\u002F1.getting-started\u002F4.migrating-from-v2","i-lucide-arrow-right-left",false,{"title":37,"icon":38,"path":39,"stem":40,"children":41,"page":35},"Guides","i-lucide-book-marked","\u002Fdocs\u002Fguides","docs\u002F2.guides",[42,47,52,57,62,67,72,77,82,87,92,97,102,107,112,117],{"title":43,"path":44,"stem":45,"icon":46},"The provider","\u002Fdocs\u002Fguides\u002Fprovider","docs\u002F2.guides\u002F01.provider","i-lucide-layers",{"title":48,"path":49,"stem":50,"icon":51},"Drag and drop","\u002Fdocs\u002Fguides\u002Fdrag-and-drop","docs\u002F2.guides\u002F02.drag-and-drop","i-lucide-move",{"title":53,"path":54,"stem":55,"icon":56},"Sortable lists","\u002Fdocs\u002Fguides\u002Fsortable-lists","docs\u002F2.guides\u002F03.sortable-lists","i-lucide-list-ordered",{"title":58,"path":59,"stem":60,"icon":61},"Lists that share items","\u002Fdocs\u002Fguides\u002Fshared-lists","docs\u002F2.guides\u002F04.shared-lists","i-lucide-kanban",{"title":63,"path":64,"stem":65,"icon":66},"Trees","\u002Fdocs\u002Fguides\u002Ftrees","docs\u002F2.guides\u002F05.trees","i-lucide-folder-tree",{"title":68,"path":69,"stem":70,"icon":71},"Multi-drag and selection","\u002Fdocs\u002Fguides\u002Fmulti-drag","docs\u002F2.guides\u002F06.multi-drag","i-lucide-copy",{"title":73,"path":74,"stem":75,"icon":76},"The overlay","\u002Fdocs\u002Fguides\u002Foverlay","docs\u002F2.guides\u002F07.overlay","i-lucide-mouse-pointer-2",{"title":78,"path":79,"stem":80,"icon":81},"Axes, bounds and grids","\u002Fdocs\u002Fguides\u002Fconstraints","docs\u002F2.guides\u002F08.constraints","i-lucide-axis-3d",{"title":83,"path":84,"stem":85,"icon":86},"Deciding a drop","\u002Fdocs\u002Fguides\u002Fdrop-decisions","docs\u002F2.guides\u002F09.drop-decisions","i-lucide-check-check",{"title":88,"path":89,"stem":90,"icon":91},"Animations","\u002Fdocs\u002Fguides\u002Fanimations","docs\u002F2.guides\u002F10.animations","i-lucide-sparkles",{"title":93,"path":94,"stem":95,"icon":96},"Accessibility","\u002Fdocs\u002Fguides\u002Faccessibility","docs\u002F2.guides\u002F11.accessibility","i-lucide-accessibility",{"title":98,"path":99,"stem":100,"icon":101},"Virtual lists","\u002Fdocs\u002Fguides\u002Fvirtual-lists","docs\u002F2.guides\u002F12.virtual-lists","i-lucide-rows-3",{"title":103,"path":104,"stem":105,"icon":106},"Styling","\u002Fdocs\u002Fguides\u002Fstyling","docs\u002F2.guides\u002F13.styling","i-lucide-palette",{"title":108,"path":109,"stem":110,"icon":111},"Sensors and programmatic drags","\u002Fdocs\u002Fguides\u002Fsensors","docs\u002F2.guides\u002F14.sensors","i-lucide-joystick",{"title":113,"path":114,"stem":115,"icon":116},"DevTools","\u002Fdocs\u002Fguides\u002Fdevtools","docs\u002F2.guides\u002F15.devtools","i-lucide-bug",{"title":118,"path":119,"stem":120,"icon":121},"Files and other apps","\u002Fdocs\u002Fguides\u002Fnative","docs\u002F2.guides\u002F16.native","i-lucide-app-window",{"title":123,"icon":124,"path":125,"stem":126,"children":127,"page":35},"API","i-lucide-braces","\u002Fdocs\u002Fapi","docs\u002F3.api",[128,133,137,142,146,151,156,161,166,171,175,180,184,188,193],{"title":129,"path":130,"stem":131,"icon":132},"DnDProvider","\u002Fdocs\u002Fapi\u002Fdnd-provider","docs\u002F3.api\u002F01.dnd-provider","i-lucide-box",{"title":134,"path":135,"stem":136,"icon":51},"makeDraggable","\u002Fdocs\u002Fapi\u002Fmake-draggable","docs\u002F3.api\u002F02.make-draggable",{"title":138,"path":139,"stem":140,"icon":141},"makeDroppable","\u002Fdocs\u002Fapi\u002Fmake-droppable","docs\u002F3.api\u002F03.make-droppable","i-lucide-inbox",{"title":143,"path":144,"stem":145,"icon":56},"makeSortableList","\u002Fdocs\u002Fapi\u002Fmake-sortable-list","docs\u002F3.api\u002F04.make-sortable-list",{"title":147,"path":148,"stem":149,"icon":150},"makeSortableItem","\u002Fdocs\u002Fapi\u002Fmake-sortable-item","docs\u002F3.api\u002F05.make-sortable-item","i-lucide-grip-vertical",{"title":152,"path":153,"stem":154,"icon":155},"makeSortableTree","\u002Fdocs\u002Fapi\u002Fmake-sortable-tree","docs\u002F3.api\u002F06.make-sortable-tree","i-lucide-list-tree",{"title":157,"path":158,"stem":159,"icon":160},"makeSelectionArea","\u002Fdocs\u002Fapi\u002Fmake-selection-area","docs\u002F3.api\u002F07.make-selection-area","i-lucide-square-dashed-mouse-pointer",{"title":162,"path":163,"stem":164,"icon":165},"makeDragArea","\u002Fdocs\u002Fapi\u002Fmake-drag-area","docs\u002F3.api\u002F08.make-drag-area","i-lucide-frame",{"title":167,"path":168,"stem":169,"icon":170},"useDnD and monitors","\u002Fdocs\u002Fapi\u002Fuse-dnd","docs\u002F3.api\u002F09.use-dnd","i-lucide-radio",{"title":172,"path":173,"stem":174,"icon":29},"Events","\u002Fdocs\u002Fapi\u002Fevents","docs\u002F3.api\u002F10.events",{"title":176,"path":177,"stem":178,"icon":179},"Modifiers and collision","\u002Fdocs\u002Fapi\u002Fmodifiers","docs\u002F3.api\u002F11.modifiers","i-lucide-sliders-horizontal",{"title":181,"path":182,"stem":183,"icon":71},"DragPreview and overlay props","\u002Fdocs\u002Fapi\u002Fdrag-preview","docs\u002F3.api\u002F12.drag-preview",{"title":88,"path":185,"stem":186,"icon":187},"\u002Fdocs\u002Fapi\u002Fanimations","docs\u002F3.api\u002F13.animations","i-lucide-wand-sparkles",{"title":189,"path":190,"stem":191,"icon":192},"Sensors","\u002Fdocs\u002Fapi\u002Fsensors","docs\u002F3.api\u002F14.sensors","i-lucide-gamepad-2",{"title":194,"path":195,"stem":196,"icon":197},"Common types","\u002Fdocs\u002Fapi\u002Ftypes","docs\u002F3.api\u002F15.types","i-lucide-shapes",{"title":199,"path":200,"stem":201,"children":202,"icon":205},"Examples","\u002Fdocs\u002Fexamples","docs\u002F4.examples\u002F00.index",[203,206,211,216,221,226,231,236,241,246],{"title":204,"path":200,"stem":201,"icon":205},"Overview","i-lucide-layout-grid",{"title":207,"path":208,"stem":209,"icon":210},"Project board","\u002Fdocs\u002Fexamples\u002Fboard","docs\u002F4.examples\u002F01.board","i-lucide-square-kanban",{"title":212,"path":213,"stem":214,"icon":215},"Week calendar","\u002Fdocs\u002Fexamples\u002Fcalendar","docs\u002F4.examples\u002F02.calendar","i-lucide-calendar-days",{"title":217,"path":218,"stem":219,"icon":220},"File manager","\u002Fdocs\u002Fexamples\u002Ffile-manager","docs\u002F4.examples\u002F03.file-manager","i-lucide-folder-open",{"title":222,"path":223,"stem":224,"icon":225},"Block editor","\u002Fdocs\u002Fexamples\u002Fblock-editor","docs\u002F4.examples\u002F04.block-editor","i-lucide-blocks",{"title":227,"path":228,"stem":229,"icon":230},"Chess","\u002Fdocs\u002Fexamples\u002Fchess","docs\u002F4.examples\u002F05.chess","i-lucide-chess-knight",{"title":232,"path":233,"stem":234,"icon":235},"Form builder","\u002Fdocs\u002Fexamples\u002Fform-builder","docs\u002F4.examples\u002F06.form-builder","i-lucide-text-cursor-input",{"title":237,"path":238,"stem":239,"icon":240},"Design canvas","\u002Fdocs\u002Fexamples\u002Fdesign-canvas","docs\u002F4.examples\u002F07.design-canvas","i-lucide-pen-tool",{"title":242,"path":243,"stem":244,"icon":245},"Page builder","\u002Fdocs\u002Fexamples\u002Fpage-builder","docs\u002F4.examples\u002F08.page-builder","i-lucide-layout-template",{"title":247,"path":248,"stem":249,"icon":250},"Data table","\u002Fdocs\u002Fexamples\u002Fdata-table","docs\u002F4.examples\u002F09.data-table","i-lucide-table-2",{"title":252,"path":253,"stem":254,"children":255,"icon":257},"Changelog","\u002Fdocs\u002Fchangelog","docs\u002F5.changelog\u002F0.index",[256,258,263,267],{"title":204,"path":253,"stem":254,"icon":257},"i-lucide-history",{"title":259,"path":260,"stem":261,"icon":262},"3.0.0","\u002Fdocs\u002Fchangelog\u002Fv3-0-0","docs\u002F5.changelog\u002F997.v3-0-0","i-lucide-tag",{"title":264,"path":265,"stem":266,"icon":262},"3.0.0-beta.2","\u002Fdocs\u002Fchangelog\u002Fv3-0-0-beta-2","docs\u002F5.changelog\u002F998.v3-0-0-beta-2",{"title":268,"path":269,"stem":270,"icon":262},"3.0.0-beta.1","\u002Fdocs\u002Fchangelog\u002Fv3-0-0-beta-1","docs\u002F5.changelog\u002F999.v3-0-0-beta-1",[272],{"title":273,"path":274,"stem":275,"children":276,"page":35},"Ja","\u002Fja","ja",[277],{"title":278,"source":279,"path":280,"stem":281,"children":282,"page":35},"ドキュメント","6556add362","\u002Fja\u002Fdocs","ja\u002Fdocs",[283,305,374,430],{"title":284,"source":285,"icon":11,"path":286,"stem":287,"children":288,"page":35},"はじめに","e345edbff3","\u002Fja\u002Fdocs\u002Fgetting-started","ja\u002Fdocs\u002F1.getting-started",[289,293,297,301],{"title":290,"path":291,"stem":292,"icon":19},"イントロダクション","\u002Fja\u002Fdocs\u002Fgetting-started\u002Fintroduction","ja\u002Fdocs\u002F1.getting-started\u002F1.introduction",{"title":294,"path":295,"stem":296,"icon":24},"インストール","\u002Fja\u002Fdocs\u002Fgetting-started\u002Finstallation","ja\u002Fdocs\u002F1.getting-started\u002F2.installation",{"title":298,"path":299,"stem":300,"icon":29},"クイックスタート","\u002Fja\u002Fdocs\u002Fgetting-started\u002Fquick-start","ja\u002Fdocs\u002F1.getting-started\u002F3.quick-start",{"title":302,"path":303,"stem":304,"icon":34},"v2 からの移行","\u002Fja\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2","ja\u002Fdocs\u002F1.getting-started\u002F4.migrating-from-v2",{"title":306,"source":307,"icon":38,"path":308,"stem":309,"children":310,"page":35},"ガイド","0338bbaa33","\u002Fja\u002Fdocs\u002Fguides","ja\u002Fdocs\u002F2.guides",[311,315,319,323,327,331,335,339,343,347,351,355,359,363,367,370],{"title":312,"path":313,"stem":314,"icon":46},"プロバイダー","\u002Fja\u002Fdocs\u002Fguides\u002Fprovider","ja\u002Fdocs\u002F2.guides\u002F01.provider",{"title":316,"path":317,"stem":318,"icon":51},"ドラッグ＆ドロップ","\u002Fja\u002Fdocs\u002Fguides\u002Fdrag-and-drop","ja\u002Fdocs\u002F2.guides\u002F02.drag-and-drop",{"title":320,"path":321,"stem":322,"icon":56},"並べ替え可能なリスト","\u002Fja\u002Fdocs\u002Fguides\u002Fsortable-lists","ja\u002Fdocs\u002F2.guides\u002F03.sortable-lists",{"title":324,"path":325,"stem":326,"icon":61},"アイテムを共有するリスト","\u002Fja\u002Fdocs\u002Fguides\u002Fshared-lists","ja\u002Fdocs\u002F2.guides\u002F04.shared-lists",{"title":328,"path":329,"stem":330,"icon":66},"ツリー","\u002Fja\u002Fdocs\u002Fguides\u002Ftrees","ja\u002Fdocs\u002F2.guides\u002F05.trees",{"title":332,"path":333,"stem":334,"icon":71},"マルチドラッグと選択","\u002Fja\u002Fdocs\u002Fguides\u002Fmulti-drag","ja\u002Fdocs\u002F2.guides\u002F06.multi-drag",{"title":336,"path":337,"stem":338,"icon":76},"オーバーレイ","\u002Fja\u002Fdocs\u002Fguides\u002Foverlay","ja\u002Fdocs\u002F2.guides\u002F07.overlay",{"title":340,"path":341,"stem":342,"icon":81},"軸、境界、グリッド","\u002Fja\u002Fdocs\u002Fguides\u002Fconstraints","ja\u002Fdocs\u002F2.guides\u002F08.constraints",{"title":344,"path":345,"stem":346,"icon":86},"ドロップの判断","\u002Fja\u002Fdocs\u002Fguides\u002Fdrop-decisions","ja\u002Fdocs\u002F2.guides\u002F09.drop-decisions",{"title":348,"path":349,"stem":350,"icon":91},"アニメーション","\u002Fja\u002Fdocs\u002Fguides\u002Fanimations","ja\u002Fdocs\u002F2.guides\u002F10.animations",{"title":352,"path":353,"stem":354,"icon":96},"アクセシビリティ","\u002Fja\u002Fdocs\u002Fguides\u002Faccessibility","ja\u002Fdocs\u002F2.guides\u002F11.accessibility",{"title":356,"path":357,"stem":358,"icon":101},"仮想リスト","\u002Fja\u002Fdocs\u002Fguides\u002Fvirtual-lists","ja\u002Fdocs\u002F2.guides\u002F12.virtual-lists",{"title":360,"path":361,"stem":362,"icon":106},"スタイリング","\u002Fja\u002Fdocs\u002Fguides\u002Fstyling","ja\u002Fdocs\u002F2.guides\u002F13.styling",{"title":364,"path":365,"stem":366,"icon":111},"センサーとプログラムによるドラッグ","\u002Fja\u002Fdocs\u002Fguides\u002Fsensors","ja\u002Fdocs\u002F2.guides\u002F14.sensors",{"title":113,"path":368,"stem":369,"icon":116},"\u002Fja\u002Fdocs\u002Fguides\u002Fdevtools","ja\u002Fdocs\u002F2.guides\u002F15.devtools",{"title":371,"path":372,"stem":373,"icon":121},"ファイルとほかのアプリ","\u002Fja\u002Fdocs\u002Fguides\u002Fnative","ja\u002Fdocs\u002F2.guides\u002F16.native",{"title":123,"source":375,"icon":124,"path":376,"stem":377,"children":378,"page":35},"5c96005c70","\u002Fja\u002Fdocs\u002Fapi","ja\u002Fdocs\u002F3.api",[379,382,385,388,391,394,397,400,403,407,411,415,419,422,426],{"title":129,"path":380,"stem":381,"icon":132},"\u002Fja\u002Fdocs\u002Fapi\u002Fdnd-provider","ja\u002Fdocs\u002F3.api\u002F01.dnd-provider",{"title":134,"path":383,"stem":384,"icon":51},"\u002Fja\u002Fdocs\u002Fapi\u002Fmake-draggable","ja\u002Fdocs\u002F3.api\u002F02.make-draggable",{"title":138,"path":386,"stem":387,"icon":141},"\u002Fja\u002Fdocs\u002Fapi\u002Fmake-droppable","ja\u002Fdocs\u002F3.api\u002F03.make-droppable",{"title":143,"path":389,"stem":390,"icon":56},"\u002Fja\u002Fdocs\u002Fapi\u002Fmake-sortable-list","ja\u002Fdocs\u002F3.api\u002F04.make-sortable-list",{"title":147,"path":392,"stem":393,"icon":150},"\u002Fja\u002Fdocs\u002Fapi\u002Fmake-sortable-item","ja\u002Fdocs\u002F3.api\u002F05.make-sortable-item",{"title":152,"path":395,"stem":396,"icon":155},"\u002Fja\u002Fdocs\u002Fapi\u002Fmake-sortable-tree","ja\u002Fdocs\u002F3.api\u002F06.make-sortable-tree",{"title":157,"path":398,"stem":399,"icon":160},"\u002Fja\u002Fdocs\u002Fapi\u002Fmake-selection-area","ja\u002Fdocs\u002F3.api\u002F07.make-selection-area",{"title":162,"path":401,"stem":402,"icon":165},"\u002Fja\u002Fdocs\u002Fapi\u002Fmake-drag-area","ja\u002Fdocs\u002F3.api\u002F08.make-drag-area",{"title":404,"path":405,"stem":406,"icon":170},"useDnD とモニター","\u002Fja\u002Fdocs\u002Fapi\u002Fuse-dnd","ja\u002Fdocs\u002F3.api\u002F09.use-dnd",{"title":408,"path":409,"stem":410,"icon":29},"イベント","\u002Fja\u002Fdocs\u002Fapi\u002Fevents","ja\u002Fdocs\u002F3.api\u002F10.events",{"title":412,"path":413,"stem":414,"icon":179},"モディファイアと衝突判定","\u002Fja\u002Fdocs\u002Fapi\u002Fmodifiers","ja\u002Fdocs\u002F3.api\u002F11.modifiers",{"title":416,"path":417,"stem":418,"icon":71},"DragPreview とオーバーレイの props","\u002Fja\u002Fdocs\u002Fapi\u002Fdrag-preview","ja\u002Fdocs\u002F3.api\u002F12.drag-preview",{"title":348,"path":420,"stem":421,"icon":187},"\u002Fja\u002Fdocs\u002Fapi\u002Fanimations","ja\u002Fdocs\u002F3.api\u002F13.animations",{"title":423,"path":424,"stem":425,"icon":192},"センサー","\u002Fja\u002Fdocs\u002Fapi\u002Fsensors","ja\u002Fdocs\u002F3.api\u002F14.sensors",{"title":427,"path":428,"stem":429,"icon":197},"共通の型","\u002Fja\u002Fdocs\u002Fapi\u002Ftypes","ja\u002Fdocs\u002F3.api\u002F15.types",{"title":431,"path":432,"stem":433,"children":434,"icon":205,"source":473},"サンプル","\u002Fja\u002Fdocs\u002Fexamples","ja\u002Fdocs\u002F4.examples\u002F00.index",[435,437,441,445,449,453,457,461,465,469],{"title":436,"path":432,"stem":433,"icon":205},"概要",{"title":438,"path":439,"stem":440,"icon":210},"プロジェクトボード","\u002Fja\u002Fdocs\u002Fexamples\u002Fboard","ja\u002Fdocs\u002F4.examples\u002F01.board",{"title":442,"path":443,"stem":444,"icon":215},"週間カレンダー","\u002Fja\u002Fdocs\u002Fexamples\u002Fcalendar","ja\u002Fdocs\u002F4.examples\u002F02.calendar",{"title":446,"path":447,"stem":448,"icon":220},"ファイルマネージャー","\u002Fja\u002Fdocs\u002Fexamples\u002Ffile-manager","ja\u002Fdocs\u002F4.examples\u002F03.file-manager",{"title":450,"path":451,"stem":452,"icon":225},"ブロックエディター","\u002Fja\u002Fdocs\u002Fexamples\u002Fblock-editor","ja\u002Fdocs\u002F4.examples\u002F04.block-editor",{"title":454,"path":455,"stem":456,"icon":230},"チェス","\u002Fja\u002Fdocs\u002Fexamples\u002Fchess","ja\u002Fdocs\u002F4.examples\u002F05.chess",{"title":458,"path":459,"stem":460,"icon":235},"フォームビルダー","\u002Fja\u002Fdocs\u002Fexamples\u002Fform-builder","ja\u002Fdocs\u002F4.examples\u002F06.form-builder",{"title":462,"path":463,"stem":464,"icon":240},"デザインキャンバス","\u002Fja\u002Fdocs\u002Fexamples\u002Fdesign-canvas","ja\u002Fdocs\u002F4.examples\u002F07.design-canvas",{"title":466,"path":467,"stem":468,"icon":245},"ページビルダー","\u002Fja\u002Fdocs\u002Fexamples\u002Fpage-builder","ja\u002Fdocs\u002F4.examples\u002F08.page-builder",{"title":470,"path":471,"stem":472,"icon":250},"データテーブル","\u002Fja\u002Fdocs\u002Fexamples\u002Fdata-table","ja\u002Fdocs\u002F4.examples\u002F09.data-table","bd60379aec",{"page":475,"fallback":35},{"id":476,"title":113,"body":477,"category":306,"description":1670,"extension":1671,"links":1672,"meta":1673,"navigation":1675,"path":368,"seo":1676,"stem":369,"__hash__":1677},"docs_ja\u002Fja\u002Fdocs\u002F2.guides\u002F15.devtools.md",{"type":478,"value":479,"toc":1653},"minimark",[480,497,500,504,509,540,546,550,743,762,773,777,788,792,799,920,939,957,961,1006,1012,1016,1095,1098,1102,1105,1128,1131,1135,1148,1168,1178,1256,1260,1266,1407,1410,1414,1417,1441,1444,1448,1451,1546,1563,1567,1570,1638,1642,1649],[481,482,483,487,488,491,492,496],"p",{},[484,485,486],"code",{},"@vue-dnd-kit\u002Fdevtools"," は、Vue DevTools（",[484,489,490],{},"vite-plugin-vue-devtools","）と Nuxt DevTools に ",[493,494,495],"strong",{},"Vue DnD Kit"," タブを追加します。ページのすべてのリスト、ツリー、ドロップターゲットをライブのミニマップに表示し、ジョイスティックで任意のアイテムをドラッグし、アプリの実行中にオプションを編集し、各ドラッグが何をしたかを記録します。開発環境でのみ動作し、本番ビルドには何も含まれません。",[481,498,499],{},"タブは、開発サーバーがアプリの隣で配信する独立したページなので、このドキュメントの中では動かせません。3 つのステップでセットアップできます。",[501,502,294],"h2",{"id":503},"install",[505,506,508],"h3",{"id":507},"_1-add-the-packages","1. パッケージを追加する",[510,511,516],"pre",{"className":512,"code":513,"language":514,"meta":515,"style":515},"language-bash shiki shiki-themes dnd-light dnd-light dnd-dark","npm i -D @vue-dnd-kit\u002Fdevtools @vue-dnd-kit\u002Factions\n","bash","",[484,517,518],{"__ignoreMap":515},[519,520,523,527,531,534,537],"span",{"class":521,"line":522},"line",1,[519,524,526],{"class":525},"sbwC8","npm",[519,528,530],{"class":529},"sN8r7"," i",[519,532,533],{"class":529}," -D",[519,535,536],{"class":529}," @vue-dnd-kit\u002Fdevtools",[519,538,539],{"class":529}," @vue-dnd-kit\u002Factions\n",[481,541,542,545],{},[484,543,544],{},"@vue-dnd-kit\u002Factions"," はピア依存関係で、タブでの移動はこれを通じて行われます。npm 7 以降と pnpm は自動でインストールします。Yarn 1 では追加してください。",[505,547,549],{"id":548},"_2-add-the-plugin","2. プラグインを追加する",[551,552,553,702],"code-group",{},[510,554,559],{"className":555,"code":556,"filename":557,"language":558,"meta":515,"style":515},"language-ts shiki shiki-themes dnd-light dnd-light dnd-dark","import { defineConfig } from 'vite';\nimport vue from '@vitejs\u002Fplugin-vue';\nimport vueDevTools from 'vite-plugin-vue-devtools';\nimport { vueDnDKitDevtools } from '@vue-dnd-kit\u002Fdevtools\u002Fvite';\n\nexport default defineConfig({\n  \u002F\u002F Next to the Vue DevTools plugin: the tab joins its sidebar.\n  plugins: [vueDevTools(), vueDnDKitDevtools(), vue()],\n});\n","vite.config.ts","ts",[484,560,561,587,603,618,637,644,659,666,696],{"__ignoreMap":515},[519,562,563,567,571,575,578,581,584],{"class":521,"line":522},[519,564,566],{"class":565},"s78Kj","import",[519,568,570],{"class":569},"s6cML"," {",[519,572,574],{"class":573},"snmWg"," defineConfig ",[519,576,577],{"class":569},"}",[519,579,580],{"class":565}," from",[519,582,583],{"class":529}," 'vite'",[519,585,586],{"class":569},";\n",[519,588,590,592,595,598,601],{"class":521,"line":589},2,[519,591,566],{"class":565},[519,593,594],{"class":573}," vue ",[519,596,597],{"class":565},"from",[519,599,600],{"class":529}," '@vitejs\u002Fplugin-vue'",[519,602,586],{"class":569},[519,604,606,608,611,613,616],{"class":521,"line":605},3,[519,607,566],{"class":565},[519,609,610],{"class":573}," vueDevTools ",[519,612,597],{"class":565},[519,614,615],{"class":529}," 'vite-plugin-vue-devtools'",[519,617,586],{"class":569},[519,619,621,623,625,628,630,632,635],{"class":521,"line":620},4,[519,622,566],{"class":565},[519,624,570],{"class":569},[519,626,627],{"class":573}," vueDnDKitDevtools ",[519,629,577],{"class":569},[519,631,580],{"class":565},[519,633,634],{"class":529}," '@vue-dnd-kit\u002Fdevtools\u002Fvite'",[519,636,586],{"class":569},[519,638,640],{"class":521,"line":639},5,[519,641,643],{"emptyLinePlaceholder":642},true,"\n",[519,645,647,650,653,656],{"class":521,"line":646},6,[519,648,649],{"class":565},"export",[519,651,652],{"class":565}," default",[519,654,655],{"class":525}," defineConfig",[519,657,658],{"class":569},"({\n",[519,660,662],{"class":521,"line":661},7,[519,663,665],{"class":664},"sytrG","  \u002F\u002F Next to the Vue DevTools plugin: the tab joins its sidebar.\n",[519,667,669,673,676,679,682,685,688,690,693],{"class":521,"line":668},8,[519,670,672],{"class":671},"sVvmN","  plugins",[519,674,675],{"class":569},":",[519,677,678],{"class":569}," [",[519,680,681],{"class":525},"vueDevTools",[519,683,684],{"class":569},"(),",[519,686,687],{"class":525}," vueDnDKitDevtools",[519,689,684],{"class":569},[519,691,692],{"class":525}," vue",[519,694,695],{"class":569},"()],\n",[519,697,699],{"class":521,"line":698},9,[519,700,701],{"class":569},"});\n",[510,703,706],{"className":555,"code":704,"filename":705,"language":558,"meta":515,"style":515},"export default defineNuxtConfig({\n  \u002F\u002F With @vue-dnd-kit\u002Fdevtools installed, the tab appears in development.\n  modules: ['@vue-dnd-kit\u002Fnuxt'],\n});\n","nuxt.config.ts",[484,707,708,719,724,739],{"__ignoreMap":515},[519,709,710,712,714,717],{"class":521,"line":522},[519,711,649],{"class":565},[519,713,652],{"class":565},[519,715,716],{"class":525}," defineNuxtConfig",[519,718,658],{"class":569},[519,720,721],{"class":521,"line":589},[519,722,723],{"class":664},"  \u002F\u002F With @vue-dnd-kit\u002Fdevtools installed, the tab appears in development.\n",[519,725,726,729,731,733,736],{"class":521,"line":605},[519,727,728],{"class":671},"  modules",[519,730,675],{"class":569},[519,732,678],{"class":569},[519,734,735],{"class":529},"'@vue-dnd-kit\u002Fnuxt'",[519,737,738],{"class":569},"],\n",[519,740,741],{"class":521,"line":620},[519,742,701],{"class":569},[481,744,745,746,749,750,753,754,757,758,761],{},"Vite では、プラグインは開発サーバー（",[484,747,748],{},"vite serve","）で 3 つのことを行います：タブを ",[484,751,752],{},"\u002F__vue-dnd-kit-devtools\u002F","（",[484,755,756],{},"base"," の下）で配信し、Vue DevTools に追加し、アプリが起動する前にページがタブへ報告するようにします。",[484,759,760],{},"app.use()"," は不要で、ビルドには影響しません。",[481,763,764,765,768,769,772],{},"Nuxt では、",[484,766,767],{},"@vue-dnd-kit\u002Fnuxt"," モジュールがパッケージを見つけ、タブを配信し、Nuxt DevTools に追加し、クライアントプラグインでページ側をインストールします。",[484,770,771],{},"vueDndKit: { devtools: false }"," でオフになります。",[505,774,776],{"id":775},"_3-run-the-app-in-development","3. 開発環境でアプリを実行する",[481,778,779,780,783,784,787],{},"いつもどおり開発サーバーを起動し（",[484,781,782],{},"vite","、",[484,785,786],{},"nuxt dev","）、アプリを開けば、タブの準備は完了です。ページのすべてのプロバイダーが、どのアプリで描画されていてもそこに表示されます。",[505,789,791],{"id":790},"without-the-plugins","プラグインを使わない場合",[481,793,794,795,798],{},"独自の開発サーバーや、Vite が ",[484,796,797],{},"index.html"," から配信しないページ（SSR 構成）では、ページ側を自分でインストールしてください。",[510,800,803],{"className":555,"code":801,"filename":802,"language":558,"meta":515,"style":515},"import { createApp } from 'vue';\nimport { DnDDevtools } from '@vue-dnd-kit\u002Fdevtools';\nimport App from '.\u002FApp.vue';\n\nconst app = createApp(App);\napp.use(DnDDevtools); \u002F\u002F before mount: providers set up earlier aren't seen\napp.mount('#app');\n","main.ts",[484,804,805,823,841,855,859,882,904],{"__ignoreMap":515},[519,806,807,809,811,814,816,818,821],{"class":521,"line":522},[519,808,566],{"class":565},[519,810,570],{"class":569},[519,812,813],{"class":573}," createApp ",[519,815,577],{"class":569},[519,817,580],{"class":565},[519,819,820],{"class":529}," 'vue'",[519,822,586],{"class":569},[519,824,825,827,829,832,834,836,839],{"class":521,"line":589},[519,826,566],{"class":565},[519,828,570],{"class":569},[519,830,831],{"class":573}," DnDDevtools ",[519,833,577],{"class":569},[519,835,580],{"class":565},[519,837,838],{"class":529}," '@vue-dnd-kit\u002Fdevtools'",[519,840,586],{"class":569},[519,842,843,845,848,850,853],{"class":521,"line":605},[519,844,566],{"class":565},[519,846,847],{"class":573}," App ",[519,849,597],{"class":565},[519,851,852],{"class":529}," '.\u002FApp.vue'",[519,854,586],{"class":569},[519,856,857],{"class":521,"line":620},[519,858,643],{"emptyLinePlaceholder":642},[519,860,861,864,867,870,873,876,879],{"class":521,"line":639},[519,862,863],{"class":565},"const",[519,865,866],{"class":573}," app ",[519,868,869],{"class":569},"=",[519,871,872],{"class":525}," createApp",[519,874,875],{"class":569},"(",[519,877,878],{"class":573},"App",[519,880,881],{"class":569},");\n",[519,883,884,887,890,893,895,898,901],{"class":521,"line":646},[519,885,886],{"class":525},"app",[519,888,889],{"class":569},".",[519,891,892],{"class":525},"use",[519,894,875],{"class":569},[519,896,897],{"class":573},"DnDDevtools",[519,899,900],{"class":569},");",[519,902,903],{"class":664}," \u002F\u002F before mount: providers set up earlier aren't seen\n",[519,905,906,908,910,913,915,918],{"class":521,"line":661},[519,907,886],{"class":525},[519,909,889],{"class":569},[519,911,912],{"class":525},"mount",[519,914,875],{"class":569},[519,916,917],{"class":529},"'#app'",[519,919,881],{"class":569},[481,921,922,923,926,927,930,931,934,935,938],{},"または、エントリーファイルの最初で ",[484,924,925],{},"@vue-dnd-kit\u002Fdevtools\u002Fauto"," をインポートします。プラグインにタブを配信させつつ、ページ側は自分でインストールする場合は ",[484,928,929],{},"vueDnDKitDevtools({ inject: false })"," を使ってください。",[484,932,933],{},"@vue-dnd-kit\u002Fdevtools\u002Fvite"," の ",[484,936,937],{},"serveTab()"," が、タブを配信するミドルウェアです。",[940,941,942],"note",{},[481,943,944,945,948,949,952,953,956],{},"本番ビルドでは、",[484,946,947],{},"app.use(DnDDevtools)"," と ",[484,950,951],{},"auto"," のインポートはほぼ何も残りません。どのエントリーポイントも最初に ",[484,954,955],{},"process.env.NODE_ENV"," をチェックし、バンドラーが残りを取り除きます。サーバーでは何もしません。",[501,958,960],{"id":959},"open-it","開き方",[962,963,964,983,996],"ul",{},[965,966,967,970,971,975,976,979,980,982],"li",{},[493,968,969],{},"Vue DevTools","：:kbd{value=\"Alt\"} + ",[972,973],"kbd",{"value":974},"Shift"," + ",[972,977],{"value":978},"D","、またはページ下部の Vue ボタンを押し、",[493,981,495],{}," タブを選びます。",[965,984,985,970,988,975,990,992,993,995],{},[493,986,987],{},"Nuxt DevTools",[972,989],{"value":974},[972,991],{"value":978},"、または Nuxt ボタンを押し、",[493,994,495],{},"（サイドバーかそのオーバーフローメニュー）を選びます。",[965,997,998,1001,1002,1005],{},[493,999,1000],{},"独立したウィンドウ","：開発サーバーの ",[484,1003,1004],{},"http:\u002F\u002Flocalhost:5173\u002F__vue-dnd-kit-devtools\u002F"," を開くか、タブの ⧉ ボタンを押します。2 台目の画面で便利です。複数のページを開いている場合は、上部のセレクトで監視するページを選びます。",[1007,1008,1009],"warning",{},[481,1010,1011],{},"タブは独立したウィンドウに置き、同じウィンドウのバックグラウンドのブラウザータブにはしないでください。ページは表示されたままである必要があり、非表示のページはドラッグをキャンセルします。",[501,1013,1015],{"id":1014},"the-tab-at-a-glance","タブの概要",[1017,1018,1019,1032],"table",{},[1020,1021,1022],"thead",{},[1023,1024,1025,1029],"tr",{},[1026,1027,1028],"th",{},"部分",[1026,1030,1031],{},"内容",[1033,1034,1035,1052,1064,1078],"tbody",{},[1023,1036,1037,1041],{},[1038,1039,1040],"td",{},"上部バー",[1038,1042,1043,1044,1047,1048,1051],{},"今ドラッグが何をしているか（",[484,1045,1046],{},"dragging card-3 → done (accepts)","）、監視中のページ、",[493,1049,1050],{},"⌖ Pick","、編集したオプションの数とリセット、⧉（独立したウィンドウ）、テーマ。",[1023,1053,1054,1057],{},[1038,1055,1056],{},"左：レジストリ",[1038,1058,1059,1060,1063],{},"すべてのプロバイダーをツリーで表示：そのリスト、ツリー、ドロップターゲット、ドラッグ可能な要素。",[493,1061,1062],{},"☰"," で表示・非表示を切り替えます。",[1023,1065,1066,1075],{},[1038,1067,1068,1069,948,1072],{},"中央：",[493,1070,1071],{},"Map",[493,1073,1074],{},"Log",[1038,1076,1077],{},"ページのライブのミニマップ、またはドラッグのログ。",[1023,1079,1080,1092],{},[1038,1081,1082,1083,783,1086,783,1089],{},"右：",[493,1084,1085],{},"Drive",[493,1087,1088],{},"Options",[493,1090,1091],{},"State",[1038,1093,1094],{},"ジョイスティックと移動ボタン、選んだノードのオプション、プロバイダーがそれについて知っていること。",[481,1096,1097],{},"レジストリでノードを、またはマップでアイテムを選ぶと、右側がそれに追従します。",[501,1099,1101],{"id":1100},"the-mini-map","ミニマップ",[481,1103,1104],{},"リスト、ツリー、ドロップターゲットごとのライブのカードで、アイテムのコピーが実際の位置に表示されます——オーバーレイが表示するのと同じクローンで、ページの CSS が適用されています。ドラッグ中は次のものを示します。",[962,1106,1107,1118,1121],{},[965,1108,1109,1110,1113,1114,1117],{},"ドラッグを",[493,1111,1112],{},"受け入れる","（青）または",[493,1115,1116],{},"拒否する","（赤）リストとターゲット",[965,1119,1120],{},"プレースホルダーと、ポインターの下のターゲット",[965,1122,1123,1124,1127],{},"ポインター、オーバーレイのボックス、",[484,1125,1126],{},"placeholder: 'indicator'"," のリストの挿入ライン",[481,1129,1130],{},"クリックでアイテムを選んでページ上で強調表示し、ダブルクリックでページをそこまでスクロールします。ドロップが期待した場所に行かないときにマップを使ってください。どのリストがドラッグを受け入れるかがひと目でわかります。",[501,1132,1134],{"id":1133},"drive-the-joystick","Drive：ジョイスティック",[481,1136,1137,1138,1140,1141,948,1144,1147],{},"アイテムを選び——マップで、レジストリで、または ",[493,1139,1050],{}," で（ページのドラッグ可能な要素への次の押下を、作用させずに選択として受け取ります）——ジョイスティックのノブを押します。アイテムが持ち上げられてその方向へ動き、ノブが中心から遠いほど速くなります。離すと止まり、",[493,1142,1143],{},"Drop",[493,1145,1146],{},"Cancel"," でドラッグを終えます。",[481,1149,1150,1151,1154,1155,1160,1161,948,1164,1167],{},"これは ",[484,1152,1153],{},"devtools"," という名前のセンサーによる本物のポインタードラッグで、公開の",[1156,1157,1159],"a",{"href":1158},"\u002Fdocs\u002Fguides\u002Fsensors#a-sensor-of-your-own","センサー API"," で作られています。リストはその下で並べ替えられ、コンテナーは端で自動スクロールし、",[484,1162,1163],{},"onBeforeDrop",[484,1165,1166],{},"onDrop"," はどのドラッグとも同じように実行されます。無効なアイテムは持ち上げられません。ページが始めたキーボードドラッグも操作できます。",[481,1169,1170,1171,1177],{},"並べ替え可能なリストのアイテムにはボタンもあります：上へ、下へ、先頭へ、末尾へ、グループの別のリストへ。それぞれが ",[1156,1172,1174],{"href":1173},"\u002Fdocs\u002Fguides\u002Fsensors#programmatic-drags",[484,1175,1176],{},"moveItem"," による 1 回のキーボードドラッグです。ジョイスティックの下には、オーバーレイが表示しているものの大きなコピーがあります。",[1017,1179,1180,1190],{},[1020,1181,1182],{},[1023,1183,1184,1187],{},[1026,1185,1186],{},"キー（タブ内）",[1026,1188,1189],{},"動作",[1033,1191,1192,1212,1222,1236,1246],{},[1023,1193,1194,1209],{},[1038,1195,1196,1197,1200,1201,1200,1204,1200,1207],{},"矢印キーまたは ",[972,1198],{"value":1199},"W"," ",[972,1202],{"value":1203},"A",[972,1205],{"value":1206},"S",[972,1208],{"value":978},[1038,1210,1211],{},"ノブをその方向に半分倒す。:kbd{value=\"Shift\"} 付きで最後まで",[1023,1213,1214,1219],{},[1038,1215,1216],{},[972,1217],{"value":1218},"G",[1038,1220,1221],{},"選んだアイテムを持ち上げる",[1023,1223,1224,1233],{},[1038,1225,1226,1229,1230],{},[972,1227],{"value":1228},"Space"," \u002F ",[972,1231],{"value":1232},"Enter",[1038,1234,1235],{},"ドロップ",[1023,1237,1238,1243],{},[1038,1239,1240],{},[972,1241],{"value":1242},"Escape",[1038,1244,1245],{},"キャンセル",[1023,1247,1248,1253],{},[1038,1249,1250],{},[972,1251],{"value":1252},"P",[1038,1254,1255],{},"ページ上で選ぶ",[501,1257,1259],{"id":1258},"options","オプション",[481,1261,1262,1263,1265],{},"コールバックでないオプションはすべて、アプリの実行中に編集できます。ノードを選び、",[493,1264,1088],{}," を開いてください。",[1017,1267,1268,1277],{},[1020,1269,1270],{},[1023,1271,1272,1275],{},[1026,1273,1274],{},"ノード",[1026,1276,1259],{},[1033,1278,1279,1320,1359,1376,1393],{},[1023,1280,1281,1283],{},[1038,1282,312],{},[1038,1284,1285,783,1288,783,1291,783,1294,1297,1298,783,1301,783,1304,783,1307,783,1310,783,1313,783,1316,1319],{},[484,1286,1287],{},"overlayFit",[484,1289,1290],{},"autoScroll",[484,1292,1293],{},"collision",[484,1295,1296],{},"modifiers","（ライブラリのもの、名前で）、",[484,1299,1300],{},"animation",[484,1302,1303],{},"dropAnimation",[484,1305,1306],{},"animateChanges",[484,1308,1309],{},"activation",[484,1311,1312],{},"keyboard",[484,1314,1315],{},"haptics",[484,1317,1318],{},"copyModifier","…",[1023,1321,1322,1325],{},[1038,1323,1324],{},"リスト",[1038,1326,1327,783,1330,783,1333,783,1336,783,1339,783,1342,783,1345,783,1348,783,1351,783,1353,783,1355,783,1357],{},[484,1328,1329],{},"disabled",[484,1331,1332],{},"strategy",[484,1334,1335],{},"placeholder",[484,1337,1338],{},"behavior",[484,1340,1341],{},"multiple",[484,1343,1344],{},"sort",[484,1346,1347],{},"dropOutside",[484,1349,1350],{},"acceptMode",[484,1352,1300],{},[484,1354,1306],{},[484,1356,1290],{},[484,1358,1296],{},[1023,1360,1361,1363],{},[1038,1362,328],{},[1038,1364,1365,783,1367,783,1370,783,1373,1319],{},[484,1366,1335],{},[484,1368,1369],{},"indentation",[484,1371,1372],{},"nesting",[484,1374,1375],{},"maxDepth",[1023,1377,1378,1381],{},[1038,1379,1380],{},"ドロップターゲット",[1038,1382,1383,783,1385,783,1388,783,1391],{},[484,1384,1329],{},[484,1386,1387],{},"priority",[484,1389,1390],{},"accept",[484,1392,1350],{},[1023,1394,1395,1398],{},[1038,1396,1397],{},"アイテム",[1038,1399,1400,783,1402,783,1405],{},[484,1401,1329],{},[484,1403,1404],{},"keyboardMode",[484,1406,1309],{},[481,1408,1409],{},"編集はすぐに、このページだけに適用され、コードに書き込まれることはありません。ライブラリはオプションを読み取る場所で新しい値を読み取ります。リセットする（オプションごとの ↺、または上部バーのリセット）、プロバイダーがアンマウントされる、ページを再読み込みするまで有効です。編集したオプションの横には、コードでの値が表示されます。編集が有効な間にマウントされたアイテム——仮想リストの行——にも適用されます。",[501,1411,1413],{"id":1412},"state","状態",[481,1415,1416],{},"選んだノードについて、各プロバイダーが知っていること：",[962,1418,1419,1425,1433],{},[965,1420,1421,1424],{},[493,1422,1423],{},"ドラッグセッション","：状態、アクティブな id、アイテムとセンサー、ターゲットとそれが受け入れるかどうか、ポインター、オーバーレイ、並べ替え可能なグループのセッションと挿入ライン",[965,1426,1427,1429,1430,1432],{},[493,1428,1324],{},"：その順序とドラフト。",[493,1431,328],{},"：その行",[965,1434,1435,1437,1438,1440],{},[493,1436,1397],{},"：その型、データ、位置。",[493,1439,1380],{},"：そのルール",[481,1442,1443],{},"アイテムはイベントなしにマウント・アンマウントされます。レジストリは 1 秒以内に追いつきます。",[501,1445,1447],{"id":1446},"log","ログ",[481,1449,1450],{},"ドラッグごとに 1 本の帯が、順番に並びます。",[1017,1452,1453,1463],{},[1020,1454,1455],{},[1023,1456,1457,1460],{},[1026,1458,1459],{},"エントリー",[1026,1461,1462],{},"伝えること",[1033,1464,1465,1475,1488,1500,1512,1529],{},[1023,1466,1467,1472],{},[1038,1468,1469],{},[484,1470,1471],{},"drag start",[1038,1473,1474],{},"id、センサーとタッチかどうか、移動元のリスト。",[1023,1476,1477,1485],{},[1038,1478,1479,783,1482],{},[484,1480,1481],{},"over",[484,1483,1484],{},"left",[1038,1486,1487],{},"入った・出た各ターゲットと、それが受け入れるかどうか。",[1023,1489,1490,1495],{},[1038,1491,1492],{},[484,1493,1494],{},"release",[1038,1496,1497,1499],{},[484,1498,1163],{}," が判断している間の、離したときのターゲット。",[1023,1501,1502,1506],{},[1038,1503,1504],{},[484,1505,1163],{},[1038,1507,1508,1509,1511],{},"判定：受け入れた、一部を受け入れた、フックが拒否した、ターゲットの ",[484,1510,1390],{}," が拒否した。そしてフックにかかった時間。",[1023,1513,1514,1519],{},[1038,1515,1516],{},[484,1517,1518],{},"drop",[1038,1520,1521,1522,783,1525,1528],{},"ターゲット。並べ替え可能なリストでは、移動、",[484,1523,1524],{},"e.result",[484,1526,1527],{},"preventDefault()"," が呼ばれたかどうか。",[1023,1530,1531,1536],{},[1038,1532,1533],{},[484,1534,1535],{},"cancel",[1038,1537,1538,1539,1542,1543,1545],{},"理由：キャンセルされた（Escape、",[484,1540,1541],{},"cancel()","）、フックが拒否した、ターゲットの ",[484,1544,1390],{}," が拒否した。",[481,1547,1548,1549,948,1552,783,1555,1558,1559,1562],{},"ほかに ",[484,1550,1551],{},"auto-scroll on",[484,1553,1554],{},"off",[484,1556,1557],{},"announcement"," のテキスト（デフォルトでは非表示）、そしてドラッグの外では ",[484,1560,1561],{},"animate","（ドラッグ以外によるリストのアイテムの変化）があります。エントリーをクリックするとそのデータが見られます。後から開いたタブも、それまでのドラッグを受け取ります。",[501,1564,1566],{"id":1565},"debug-a-drop-step-by-step","ドロップを 1 ステップずつデバッグする",[481,1568,1569],{},"カードがある列に入りません。タブを開いた状態で：",[1571,1572,1573,1582,1599,1621],"ol",{},[965,1574,1575,1578,1579,1581],{},[493,1576,1577],{},"再現します","。手で行うか、",[493,1580,1085],{}," を使えば両手をタブの操作に使えます。",[965,1583,1584,1585,1588,1589,753,1592,1595,1596,1598],{},"カードが列の上にある間、",[493,1586,1587],{},"マップを見ます","。赤はリストがカードを拒否していることを意味します：その ",[484,1590,1591],{},"group",[484,1593,1594],{},"put","）か、ターゲットの ",[484,1597,1390],{}," を確認してください。青は受け入れていることを意味し、問題はその後にあります。",[965,1600,1601,1602,1605,1606,1608,1609,1611,1612,1614,1615,1617,1618,1620],{},"そのドラッグの",[493,1603,1604],{},"ログを読みます","。",[484,1607,1163],{}," が、誰が拒否したか——フックか、ターゲットの ",[484,1610,1390],{}," か——を示します。ドロップは成立したのにデータが変わらない場合、",[484,1613,1518],{}," エントリーが ",[484,1616,1527],{}," が呼ばれたかどうかと、",[484,1619,1524],{}," の中身を示します：制御されたリストは自分でそれを適用する必要があります。",[965,1622,1623,1625,1626,1629,1630,1632,1633,783,1635,1637],{},[493,1624,1088],{}," で",[493,1627,1628],{},"修正をその場で試します","——より緩い ",[484,1631,1350],{},"、別の ",[484,1634,1293],{},[484,1636,1126],{},"——そしてうまくいったものをコードに書きます。",[501,1639,1641],{"id":1640},"how-it-works","仕組み",[481,1643,1644,1645,1648],{},"プロバイダーは、ページ側がインストールするフックに報告します。タブがページを監視するまでは記録されるだけです。監視が始まると、ページはほかのモニターと同じようにリッスンし、タブが表示するものを送ります——ドラッグ中は 40 ms ごと、それ以外は 1 秒に 2 回——そして、数秒間どのタブも監視しなくなると止まります。タブはページのオリジンの ",[484,1646,1647],{},"BroadcastChannel"," を通じてページと通信します。変更するのは、あなたが求めたものだけです：ドラッグ、選択、オプションの上書き。",[1650,1651,1652],"style",{},"html pre.shiki code .sbwC8, html code.shiki .sbwC8{--shiki-light:#0969DA;--shiki-default:#0969DA;--shiki-dark:#7CC4FF}html pre.shiki code .sN8r7, html code.shiki .sN8r7{--shiki-light:#9A6700;--shiki-default:#9A6700;--shiki-dark:#E9C46A}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s78Kj, html code.shiki .s78Kj{--shiki-light:#1F8A5B;--shiki-default:#1F8A5B;--shiki-dark:#42B883}html pre.shiki code .s6cML, html code.shiki .s6cML{--shiki-light:#5B5B63;--shiki-default:#5B5B63;--shiki-dark:#9F9FA9}html pre.shiki code .snmWg, html code.shiki .snmWg{--shiki-light:#27272A;--shiki-default:#27272A;--shiki-dark:#E4E4E7}html pre.shiki code .sytrG, html code.shiki .sytrG{--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-default:#85858D;--shiki-default-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic}html pre.shiki code .sVvmN, html code.shiki .sVvmN{--shiki-light:#7C4DCC;--shiki-default:#7C4DCC;--shiki-dark:#C3A6FF}",{"title":515,"searchDepth":605,"depth":605,"links":1654},[1655,1661,1662,1663,1664,1665,1666,1667,1668,1669],{"id":503,"depth":589,"text":294,"children":1656},[1657,1658,1659,1660],{"id":507,"depth":605,"text":508},{"id":548,"depth":605,"text":549},{"id":775,"depth":605,"text":776},{"id":790,"depth":605,"text":791},{"id":959,"depth":589,"text":960},{"id":1014,"depth":589,"text":1015},{"id":1100,"depth":589,"text":1101},{"id":1133,"depth":589,"text":1134},{"id":1258,"depth":589,"text":1259},{"id":1412,"depth":589,"text":1413},{"id":1446,"depth":589,"text":1447},{"id":1565,"depth":589,"text":1566},{"id":1640,"depth":589,"text":1641},"Vue DevTools と Nuxt DevTools の Vue DnD Kit タブ——ライブのミニマップ、実際にドラッグするジョイスティック、オプションのライブ編集、すべてのドラッグのログ。","md",null,{"source":1674},"6f7e373d0b",{"icon":116},{"title":113,"description":1670},"CzADpRlDRxk7IDLebCqqXlIR-1YKPYZmQg2BkB52RR0",[1679,1681],{"title":364,"path":365,"stem":366,"description":1680,"icon":111},"入力がどのようにドラッグになるか——ポインターとキーボードのセンサー、アクティベーション制約、canDrag、独自のセンサー、@vue-dnd-kit\u002Factions でスクリプトするドラッグ。",{"title":371,"path":372,"stem":373,"description":1682,"icon":121},"ブラウザー自身のドラッグ＆ドロップを、ライブラリのドラッグとして——ほかのアプリからのファイル、リンク、テキストをドロップターゲットや場所を空けるリストへ、ページの外へドラッグされるアイテム、そしてアプリのウィンドウ間で。",1793707552475]