[{"data":1,"prerenderedAt":9290},["ShallowReactive",2],{"navigation-source":3,"navigation-ja":271,"docs-\u002Fja\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2":474,"docs-surround-\u002Fja\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2":9285},[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":302,"body":477,"category":284,"description":9277,"extension":9278,"links":9279,"meta":9280,"navigation":9282,"path":303,"seo":9283,"stem":304,"__hash__":9284},"docs_ja\u002Fja\u002Fdocs\u002F1.getting-started\u002F4.migrating-from-v2.md",{"type":478,"value":479,"toc":9246},"minimark",[480,484,489,620,624,695,765,798,801,861,865,872,877,1055,1058,1242,1317,1323,1582,1597,1602,1938,1943,2137,2141,2403,2406,2652,2664,2666,2672,2789,2799,2802,3051,3057,3061,3232,3236,3240,3347,3351,3355,3470,3474,3597,3601,3604,3765,3774,3872,3886,3890,4102,4106,4122,4259,4271,4275,4279,4283,4611,4893,4897,5170,5416,5454,5457,5461,5893,6121,6125,6359,6540,6576,6579,6583,6928,6932,7241,7447,7458,7589,7605,7609,7613,7670,7885,7889,7962,8236,8268,8271,8275,8311,8315,8346,8360,8364,8368,8509,8513,8603,8606,8702,8709,8713,8800,8804,9031,9041,9045,9242],[481,482,483],"p",{},"v3 は v2 を書き直したものです。モデルは同じです：1 つのプロバイダーと、自分の要素に対して呼び出すコンポーザブル。ただし、ほとんどの名前とオプションが変わり、並べ替えはライブラリの中に移り、リストごとに書いていたドロップハンドラーは不要になります。このページでは、v2 の各部分を v3 に対応付け、よくあるケースを移行前と移行後で示します。",[485,486,488],"h2",{"id":487},"what-changed","変更点",[490,491,492,523,533,551,560,566,580,593,598,614],"ul",{},[493,494,495,499,500,504,505,508,509,512,513,515,516,518,519,522],"li",{},[496,497,498],"strong",{},"並べ替えは組み込み","です。v2 ではリストはドロップゾーンで、その行は ",[501,502,503],"code",{},"[index, items]"," のペイロードを持つドラッグ可能な要素であり、",[501,506,507],{},"onDrop"," の中で ",[501,510,511],{},"e.helpers.suggestSort()"," を使って並べ替えていました。v3 では ",[501,514,143],{}," と ",[501,517,147],{}," がそれを行います：リストは配列の",[496,520,521],{},"ドラフト","を描画し、それがドラッグ中に並べ替わり、ドロップすると新しい配列が ref に書き込まれます。v2 のドロップハンドラーのほとんどは、移植するのではなく削除します。",[493,524,525,528,529,532],{},[496,526,527],{},"ものは自分で動きます","。行は新しい位置へスライドし（FLIP）、オーバーレイはドロップで自分の位置に着地し、キャンセルで元の位置に戻ります。",[501,530,531],{},"\u003CTransitionGroup>"," は不要になります。",[493,534,535,538,539,542,543,546,547,550],{},[496,536,537],{},"パッケージは今も 1 つ","です。",[501,540,541],{},"@vue-dnd-kit\u002Fcore"," にリスト、ツリー、マルチドラッグ、モディファイア、センサー、衝突判定の関数が入っています。Nuxt モジュールは引き続きあり、",[501,544,545],{},"@vue-dnd-kit\u002Factions","（プログラムによるドラッグ）と ",[501,548,549],{},"@vue-dnd-kit\u002Fdevtools"," は新しいオプションのパッケージです。",[493,552,553,538,556,559],{},[496,554,555],{},"本物のオーバーレイ",[501,557,558],{},"body"," にテレポートされ、着地する位置と同じサイズのディープクローンを表示します。オーバーレイコンポーネントは、プロバイダーの内部を読む代わりに、ドラッグを props として受け取ります。",[493,561,562,565],{},[496,563,564],{},"要素ではなく id","です。選択、イベント、ドラッグの状態は、データの id をキーにしています。読むべき DOM 要素のマップはありません。",[493,567,568,571,572,575,576,579],{},[496,569,570],{},"型と accept ルール","が、通常のドラッグ可能な要素とドロップターゲットの ",[501,573,574],{},"groups"," に代わります。リストは ",[501,577,578],{},"group"," の名前でアイテムをやり取りします。",[493,581,582,585,586,589,590,592],{},[496,583,584],{},"判断はドロップの前に","行います。",[501,587,588],{},"onBeforeDrop"," が受け入れる、拒否する、ドラッグを続ける、またはアイテムの一部だけを受け取るかを決めます。",[501,591,507],{}," は適用するだけです。",[493,594,595,597],{},[496,596,423],{},"。ポインターとキーボードの入力はセンサーです。アクティベーションはポインターの種類ごとに設定し、タッチのドラッグは長押しで始まるので、指の下でもリストはスクロールし続けます。",[493,599,600,603,604,606,607,515,610,613],{},[496,601,602],{},"エリア","。",[501,605,162],{}," が ",[501,608,609],{},"makeConstraintArea",[501,611,612],{},"makeAutoScroll"," に代わり、自動スクロールはコードなしですべてのスクロールコンテナーで動きます。",[493,615,616,619],{},[496,617,618],{},"アクセシビリティはデフォルトでオン","です：ARIA 属性、ドロップ後に戻ってくるフォーカス、スクリーンリーダーへの読み上げ。",[485,621,623],{"id":622},"upgrade","アップグレード",[625,626,627,652,667,681],"code-group",{},[628,629,635],"pre",{"className":630,"code":631,"filename":632,"language":633,"meta":634,"style":634},"language-bash shiki shiki-themes dnd-light dnd-light dnd-dark","npm i @vue-dnd-kit\u002Fcore@^3\n","npm","bash","",[501,636,637],{"__ignoreMap":634},[638,639,642,645,649],"span",{"class":640,"line":641},"line",1,[638,643,632],{"class":644},"sbwC8",[638,646,648],{"class":647},"sN8r7"," i",[638,650,651],{"class":647}," @vue-dnd-kit\u002Fcore@^3\n",[628,653,656],{"className":630,"code":654,"filename":655,"language":633,"meta":634,"style":634},"yarn add @vue-dnd-kit\u002Fcore@^3\n","yarn",[501,657,658],{"__ignoreMap":634},[638,659,660,662,665],{"class":640,"line":641},[638,661,655],{"class":644},[638,663,664],{"class":647}," add",[638,666,651],{"class":647},[628,668,671],{"className":630,"code":669,"filename":670,"language":633,"meta":634,"style":634},"pnpm add @vue-dnd-kit\u002Fcore@^3\n","pnpm",[501,672,673],{"__ignoreMap":634},[638,674,675,677,679],{"class":640,"line":641},[638,676,670],{"class":644},[638,678,664],{"class":647},[638,680,651],{"class":647},[628,682,685],{"className":630,"code":683,"filename":684,"language":633,"meta":634,"style":634},"bun add @vue-dnd-kit\u002Fcore@^3\n","bun",[501,686,687],{"__ignoreMap":634},[638,688,689,691,693],{"class":640,"line":641},[638,690,684],{"class":644},[638,692,664],{"class":647},[638,694,651],{"class":647},[696,697,698,714],"table",{},[699,700,701],"thead",{},[702,703,704,708,711],"tr",{},[705,706,707],"th",{},"パッケージ",[705,709,710],{},"v2",[705,712,713],{},"v3",[715,716,717,730,742,754],"tbody",{},[702,718,719,724,727],{},[720,721,722],"td",{},[501,723,541],{},[720,725,726],{},"2.4.x",[720,728,729],{},"3.x",[702,731,732,737,740],{},[720,733,734],{},[501,735,736],{},"@vue-dnd-kit\u002Fnuxt",[720,738,739],{},"1.x",[720,741,729],{},[702,743,744,748,751],{},[720,745,746],{},[501,747,545],{},[720,749,750],{},"—",[720,752,753],{},"1.x、オプション",[702,755,756,760,762],{},[720,757,758],{},[501,759,549],{},[720,761,750],{},[720,763,764],{},"3.x、オプション",[490,766,767,781,792,795],{},[493,768,769,772,773,776,777,780],{},[501,770,771],{},"package.json"," に ",[501,774,775],{},"\"@vue-dnd-kit\u002Fcore\": \"^2…\""," と書かれたアプリは、範囲を ",[501,778,779],{},"^3"," にするまで v2 のままです。",[493,782,783,784,787,788,791],{},"Vue ",[496,785,786],{},"3.5"," 以降。v2 には依存関係がありませんでしたが、v3 には ",[501,789,790],{},"@vueuse\u002Fcore","（14 または 15）が 1 つあります。",[493,793,794],{},"ブラウザー：Chrome と Edge 104+、Safari 15.4+、Firefox 104+。",[493,796,797],{},"v2 と v3 は同じパッケージ名なので、アプリは一度に v3 へ移行します。互換レイヤーはありません。v2 のドキュメントは、ページ上部のバージョンメニューから引き続き見られます。",[481,799,800],{},"おすすめの作業順：",[802,803,804,813,821,824,831,841],"ol",{},[493,805,806,807,812],{},"パッケージをアップグレードし、プロバイダーの props の名前を変えます（",[808,809,811],"a",{"href":810},"#the-provider","後述","）。",[493,814,815,816,515,818,820],{},"並べ替え可能なリストをそれぞれ ",[501,817,143],{},[501,819,147],{}," に変え、そのドロップハンドラーを削除します。",[493,822,823],{},"通常のドラッグ可能な要素とドロップゾーンを移植します。",[493,825,826,827,830],{},"カスタムプレビューを、オーバーレイコンポーネントかプロバイダーの ",[501,828,829],{},"#overlay"," スロットに移植します。",[493,832,833,515,835,837,838,840],{},[501,834,609],{},[501,836,612],{}," を ",[501,839,162],{}," に置き換えるか、何も使わないようにします。",[493,842,843,844,515,847,850,851,854,855,857,858,603],{},"v2 のための回避策を削除します：ドラッグ可能な要素の ",[501,845,846],{},"tabindex",[501,848,849],{},"aria-grabbed","、アイテム全体の ",[501,852,853],{},"touch-action: none","、行を囲む ",[501,856,531],{},"、プレビューコンポーネントを囲む ",[501,859,860],{},"markRaw",[485,862,864],{"id":863},"old-to-new","新旧の対応",[481,866,867,868,871],{},"表の中の",[496,869,870],{},"対応なし","は、v3 にその名前のものがないことを意味します。代わりに何を使うかはセルに書いてあります。",[873,874,876],"h3",{"id":875},"at-a-glance","ひと目で",[696,878,879,887],{},[699,880,881],{},[702,882,883,885],{},[705,884,710],{},[705,886,713],{},[715,888,889,903,917,934,944,954,970,987,1002,1014,1031],{},[702,890,891,895],{},[720,892,893],{},[501,894,129],{},[720,896,897,899,900,902],{},[501,898,129],{},"。新しい props と ",[501,901,829],{}," スロットがあります。",[702,904,905,909],{},[720,906,907],{},[501,908,134],{},[720,910,911,912,914,915,603],{},"自由なドラッグには ",[501,913,134],{},"、リストの行には ",[501,916,147],{},[702,918,919,923],{},[720,920,921],{},[501,922,138],{},[720,924,925,926,928,929,931,932,603],{},"通常のドロップターゲットには ",[501,927,138],{},"、リストとツリーには ",[501,930,143],{}," または ",[501,933,152],{},[702,935,936,940],{},[720,937,938],{},[501,939,157],{},[720,941,942,603],{},[501,943,157],{},[702,945,946,950],{},[720,947,948],{},[501,949,609],{},[720,951,952,603],{},[501,953,162],{},[702,955,956,960],{},[720,957,958],{},[501,959,612],{},[720,961,962,963,965,966,969],{},"不要：自動スクロールは自動です。",[501,964,162],{}," かリストの ",[501,967,968],{},"autoScroll"," で調整します。",[702,971,972,977],{},[720,973,974],{},[501,975,976],{},"useDnDProvider",[720,978,979,980,983,984,603],{},"状態には ",[501,981,982],{},"useDnD","、イベントには ",[501,985,986],{},"useDnDMonitor",[702,988,989,994],{},[720,990,991],{},[501,992,993],{},"injectionKey",[720,995,996,515,999,603],{},[501,997,998],{},"useDnDContext()",[501,1000,1001],{},"provideDnDContext(app, context)",[702,1003,1004,1009],{},[720,1005,1006],{},[501,1007,1008],{},"DragPreview",[720,1010,1011,1013],{},[501,1012,1008],{},"：今はドラッグ中のアイテム 1 つのクローンで、自作のオーバーレイ用です。",[702,1015,1016,1025],{},[720,1017,1018,1021,1022],{},[501,1019,1020],{},"makeSnappedOverlayPosition","、",[501,1023,1024],{},"\u003CDragPreview :grid>",[720,1026,1027,1030],{},[501,1028,1029],{},"snapToGrid"," モディファイア。",[702,1032,1033,1047],{},[720,1034,1035,1021,1038,1021,1041,1021,1044],{},[501,1036,1037],{},"e.helpers.suggestSort",[501,1039,1040],{},"suggestSwap",[501,1042,1043],{},"suggestCopy",[501,1045,1046],{},"suggestRemove",[720,1048,1049,1050,1054],{},"リストに組み込み：",[808,1051,1053],{"href":1052},"#sorting","並べ替え","を参照。",[873,1056,312],{"id":1057},"the-provider",[696,1059,1060,1068],{},[699,1061,1062],{},[702,1063,1064,1066],{},[705,1065,710],{},[705,1067,713],{},[715,1069,1070,1093,1110,1148,1171,1184,1202,1234],{},[702,1071,1072,1078],{},[720,1073,1074,1077],{},[501,1075,1076],{},"autoScrollViewport","、設定しなければオフ",[720,1079,1080,1082,1083,1086,1087,931,1090,603],{},[501,1081,968],{},"：",[496,1084,1085],{},"デフォルトでオン","。ウィンドウとすべてのスクロールコンテナーが対象です。",[501,1088,1089],{},"{ threshold, maxSpeed, acceleration }",[501,1091,1092],{},"false",[702,1094,1095,1101],{},[720,1096,1097,1100],{},[501,1098,1099],{},"previewTo","、デフォルトではプロバイダーの中に描画",[720,1102,1103,1106,1107,603],{},[501,1104,1105],{},"overlayTo","：セレクターまたは要素。デフォルトは ",[501,1108,1109],{},"'body'",[702,1111,1112,1118],{},[720,1113,1114,1117],{},[501,1115,1116],{},"#preview=\"{ preview }\""," スロット",[720,1119,1120,1121,1123,1124,1021,1127,1021,1130,1021,1133,1021,1136,1021,1139,1021,1142,603,1145,1054],{},"ドラッグを props として受け取る ",[501,1122,829],{}," スロット：",[501,1125,1126],{},"items",[501,1128,1129],{},"active",[501,1131,1132],{},"over",[501,1134,1135],{},"accepted",[501,1137,1138],{},"status",[501,1140,1141],{},"mode",[501,1143,1144],{},"to",[808,1146,336],{"href":1147},"#the-overlay",[702,1149,1150,1166],{},[720,1151,1152,1021,1155,1021,1158,1161,1162,1165],{},[501,1153,1154],{},"keyboard.keys.forDrag",[501,1156,1157],{},"forDrop",[501,1159,1160],{},"forCancel","（",[501,1163,1164],{},"useDnDProvider()"," で設定）",[720,1167,1168,603],{},[501,1169,1170],{},":keyboard=\"{ keys: { start, drop, cancel } }\"",[702,1172,1173,1178],{},[720,1174,1175],{},[501,1176,1177],{},"keyboard.step",[720,1179,1180,1183],{},[501,1181,1182],{},":keyboard=\"{ step }\"","：デフォルトは 25 px で、自由なドラッグ用です。",[702,1185,1186,1197],{},[720,1187,1188,1021,1191,1021,1194],{},[501,1189,1190],{},"keyboard.keys.forMove",[501,1192,1193],{},"forMoveFaster",[501,1195,1196],{},"keyboard.moveFaster",[720,1198,1199,1201],{},[496,1200,870],{},"。矢印キーで動かします。:kbd{value=\"Shift\"} で自由なドラッグのステップが 4 倍になります。",[702,1203,1204,1209],{},[720,1205,1206],{},[501,1207,1208],{},"collision.throttle",[720,1210,1211,603,1213,1216,1217,1220,1221,1021,1224,1021,1227,1021,1230,1233],{},[496,1212,870],{},[501,1214,1215],{},"collision"," でターゲットの見つけ方を選びます：",[501,1218,1219],{},"pointerFirst","（デフォルト）、",[501,1222,1223],{},"pointerWithin",[501,1225,1226],{},"rectIntersection",[501,1228,1229],{},"closestCenter",[501,1231,1232],{},"closestCorners","、または自作の関数。",[702,1235,1236,1239],{},[720,1237,1238],{},"ページに 1 つのプロバイダー、ネストは不可",[720,1240,1241],{},"ネストできます：アイテムは最も近いプロバイダーのものです。アプリ全体で 1 つのプロバイダーが今も目標です。",[481,1243,1244,1245,1021,1248,1021,1251,1021,1254,1021,1257,1021,1260,1021,1263,1021,1266,1021,1269,1021,1272,1021,1275,1021,1278,1021,1281,1021,1284,1021,1287,1290,1291,1021,1294,1021,1297,1021,1300,1021,1303,1021,1306,1021,1309,1312,1313,1316],{},"v2 に対応するものがない新しい props：",[501,1246,1247],{},"activation",[501,1249,1250],{},"modifiers",[501,1252,1253],{},"sensors",[501,1255,1256],{},"animation",[501,1258,1259],{},"dropAnimation",[501,1261,1262],{},"animateChanges",[501,1264,1265],{},"haptics",[501,1267,1268],{},"copyModifier",[501,1270,1271],{},"overlayFit",[501,1273,1274],{},"overlayClass",[501,1276,1277],{},"overlayTransition",[501,1279,1280],{},"overlayPreviews",[501,1282,1283],{},"announcements",[501,1285,1286],{},"screenReaderInstructions",[501,1288,1289],{},"defaultStyles","。プロバイダーは ",[501,1292,1293],{},"drag-start",[501,1295,1296],{},"drag-move",[501,1298,1299],{},"drag-over",[501,1301,1302],{},"drag-end",[501,1304,1305],{},"drag-cancel",[501,1307,1308],{},"drag-resume",[501,1310,1311],{},"drag-settle"," も発行します。すべて",[808,1314,1315],{"href":44},"プロバイダーのガイド","にあります。",[873,1318,1320,1321,634],{"id":1319},"reading-the-state-usednd","状態を読む：",[501,1322,982],{},[696,1324,1325,1335],{},[699,1326,1327],{},[702,1328,1329,1333],{},[705,1330,1331],{},[501,1332,1164],{},[705,1334,713],{},[715,1336,1337,1388,1405,1437,1471,1496,1519,1545,1566],{},[702,1338,1339,1359],{},[720,1340,1341,1082,1344,1021,1347,1021,1350,1021,1353,931,1356],{},[501,1342,1343],{},"state",[501,1345,1346],{},"'dragging'",[501,1348,1349],{},"'activating'",[501,1351,1352],{},"'selecting'",[501,1354,1355],{},"'pending'",[501,1357,1358],{},"null",[720,1360,1361,1082,1364,1021,1367,1021,1369,1021,1371,931,1374,603,1376,1378,1379,1381,1382,1384,1385,1387],{},[501,1362,1363],{},"useDnD().status",[501,1365,1366],{},"'idle'",[501,1368,1349],{},[501,1370,1346],{},[501,1372,1373],{},"'dropping'",[501,1375,1352],{},[501,1377,1355],{},"（非同期のドロップ）は ",[501,1380,1373],{}," に、",[501,1383,1358],{}," は ",[501,1386,1366],{}," になります。",[702,1389,1390,1395],{},[720,1391,1392],{},[501,1393,1394],{},"pointer.value.current",[720,1396,1397,1400,1401,1404],{},[501,1398,1399],{},"useDnD().pointer","、モディファイア適用後の値。どのイベントにも、開始位置からのオフセットである ",[501,1402,1403],{},"delta"," があります。",[702,1406,1407,1412],{},[720,1408,1409],{},[501,1410,1411],{},"entities.draggingMap",[720,1413,1414,1082,1417,1021,1420,1021,1423,1021,1425,1021,1428,1021,1431,1021,1434,603],{},[501,1415,1416],{},"useDnD().active",[501,1418,1419],{},"id",[501,1421,1422],{},"ids",[501,1424,1126],{},[501,1426,1427],{},"data",[501,1429,1430],{},"type",[501,1432,1433],{},"element",[501,1435,1436],{},"rect",[702,1438,1439,1445],{},[720,1440,1441,1444],{},[501,1442,1443],{},"entities.selectedSet","（要素）",[720,1446,1447,1450,1451,1021,1454,1021,1457,1021,1460,1021,1463,1021,1466,1021,1469,603],{},[501,1448,1449],{},"useDnD().selection","（id）：",[501,1452,1453],{},"has",[501,1455,1456],{},"add",[501,1458,1459],{},"delete",[501,1461,1462],{},"toggle",[501,1464,1465],{},"set",[501,1467,1468],{},"clear",[501,1470,1422],{},[702,1472,1473,1481],{},[720,1474,1475,1021,1478],{},[501,1476,1477],{},"hovered.droppable",[501,1479,1480],{},"hovered.draggable",[720,1482,1483,1082,1486,1021,1488,1021,1490,1021,1492,1021,1494,603],{},[501,1484,1485],{},"useDnD().over",[501,1487,1419],{},[501,1489,1427],{},[501,1491,1433],{},[501,1493,1436],{},[501,1495,1135],{},[702,1497,1498,1506],{},[720,1499,1500,1021,1503],{},[501,1501,1502],{},"delay.progress",[501,1504,1505],{},"distanceProgress",[720,1507,1508,1021,1511,1514,1515,1518],{},[501,1509,1510],{},"useDnD().activation.progress",[501,1512,1513],{},"0"," から ",[501,1516,1517],{},"1"," まで。",[702,1520,1521,1535],{},[720,1522,1523,1021,1526,1021,1529,1021,1532],{},[501,1524,1525],{},"preview.position",[501,1527,1528],{},"preview.size",[501,1530,1531],{},"preview.render",[501,1533,1534],{},"preview.to",[720,1536,1537,1539,1540,1021,1542,1544],{},[496,1538,870],{},"。オーバーレイの配置とサイズはライブラリが決めます。",[501,1541,1105],{},[501,1543,829],{}," スロット、またはオーバーレイコンポーネントを使います。",[702,1546,1547,1562],{},[720,1548,1549,1021,1552,1021,1555,1558,1559],{},[501,1550,1551],{},"entities.draggableMap",[501,1553,1554],{},"droppableMap",[501,1556,1557],{},"visible…Set"," の各セット、",[501,1560,1561],{},"scrollPosition",[720,1563,1564,603],{},[496,1565,870],{},[702,1567,1568,1570],{},[720,1569,750],{},[720,1571,1572,1573,1021,1576,1021,1579,603],{},"新規：",[501,1574,1575],{},"useDnD().cancel()",[501,1577,1578],{},"position",[501,1580,1581],{},"isAutoScrolling",[481,1583,1584,1585,1587,1588,1592,1593,1596],{},"イベントは ",[501,1586,986],{}," に移りました：",[808,1589,1591],{"href":1590},"#events-and-drop-decisions","イベントとドロップの判断","を参照。完全な型は ",[808,1594,1595],{"href":168},"useDnD の API"," にあります。",[873,1598,1600,634],{"id":1599},"makedraggable",[501,1601,134],{},[696,1603,1604,1612],{},[699,1605,1606],{},[702,1607,1608,1610],{},[705,1609,710],{},[705,1611,713],{},[715,1613,1614,1631,1647,1666,1687,1700,1711,1724,1746,1761,1776,1796,1825,1851,1865,1890,1905],{},[702,1615,1616,1621],{},[720,1617,1618],{},[501,1619,1620],{},"makeDraggable(ref, options, payload)",[720,1622,1623,1626,1627,1630],{},[501,1624,1625],{},"makeDraggable(ref, options)","：第 3 引数はありません。リストの行は ",[501,1628,1629],{},"makeSortableItem(ref, { item })"," を使います。",[702,1632,1633,1638],{},[720,1634,1635,1637],{},[501,1636,1419],{},"、仮想リストで必要",[720,1639,1640,1642,1643,1646],{},[501,1641,1419],{},"：データから、ゲッターとして渡します。デフォルトは ",[501,1644,1645],{},"useId()"," から作られ、コンポーネントのインスタンスごとに新しくなります。",[702,1648,1649,1654],{},[720,1650,1651],{},[501,1652,1653],{},"data: () => card",[720,1655,1656,1658,1659,515,1662,1665],{},[501,1657,1427],{},"：値、ref、またはゲッター。",[501,1660,1661],{},"active.data",[501,1663,1664],{},"active.items[i].data"," で読み戻します。",[702,1667,1668,1673],{},[720,1669,1670],{},[501,1671,1672],{},"groups: ['dev']",[720,1674,1675,1678,1679,1682,1683,1054],{},[501,1676,1677],{},"type: 'dev'","。ターゲットの ",[501,1680,1681],{},"accept"," と照合されます。",[808,1684,1686],{"href":1685},"#groups","グループ",[702,1688,1689,1694],{},[720,1690,1691],{},[501,1692,1693],{},"dragHandle: '.handle'",[720,1695,1696,1699],{},[501,1697,1698],{},"handle","：セレクターまたは要素の ref。",[702,1701,1702,1707],{},[720,1703,1704],{},[501,1705,1706],{},"disabled",[720,1708,1709,603],{},[501,1710,1706],{},[702,1712,1713,1718],{},[720,1714,1715],{},[501,1716,1717],{},"modifier: { keys, method }",[720,1719,1720,1723],{},[501,1721,1722],{},"canDrag: (event) => event.altKey","：押すたびに通るゲートです。",[702,1725,1726,1731],{},[720,1727,1728],{},[501,1729,1730],{},"activation: { distance, delay }",[720,1732,1733,1734,1082,1736,603,1739,515,1742,1745],{},"ポインターの種類ごとの ",[501,1735,1247],{},[501,1737,1738],{},"{ mouse: { distance }, touch: { delay, tolerance }, pen }",[501,1740,1741],{},"distance",[501,1743,1744],{},"delay"," の両方があると、先に満たされた方でドラッグが始まります。",[702,1747,1748,1753],{},[720,1749,1750],{},[501,1751,1752],{},"activation.distance: { x, y, condition }",[720,1754,1755,1757,1758,1760],{},[496,1756,870],{},"。ポインターの種類ごとに ",[501,1759,1741],{}," は 1 つです。",[702,1762,1763,1768],{},[720,1764,1765],{},[501,1766,1767],{},"render: markRaw(Preview)",[720,1769,1770,1773,1774,1054],{},[501,1771,1772],{},"overlay: Preview","：コンポーネントはドラッグを props として受け取ります。",[808,1775,336],{"href":1147},[702,1777,1778,1783],{},[720,1779,1780],{},[501,1781,1782],{},"placementMargins",[720,1784,1785,1787,1788,1791,1792,1054],{},[496,1786,870],{},"。並べ替え可能なアイテム上のドロップターゲットは、その中央（25〜75%）で判定されます。ツリーは ",[501,1789,1790],{},"nesting: 'hover'"," でネストします。",[808,1793,1795],{"href":1794},"\u002Fdocs\u002Fguides\u002Fdrag-and-drop#drop-into-a-sortable-item","並べ替え可能なアイテムへのドロップ",[702,1797,1798,1812],{},[720,1799,1800,1021,1803,1021,1806,1021,1809],{},[501,1801,1802],{},"events.onSelfDragStart",[501,1804,1805],{},"onSelfDragMove",[501,1807,1808],{},"onSelfDragEnd",[501,1810,1811],{},"onSelfDragCancel",[720,1813,1814,1815,1082,1817,1819,1820,1630,1823,1054],{},"ドラッグ可能な要素には",[496,1816,870],{},[501,1818,986],{}," か ",[501,1821,1822],{},"watch(isDragging)",[808,1824,408],{"href":1590},[702,1826,1827,1840],{},[720,1828,1829,1021,1832,1835,1836,1839],{},[501,1830,1831],{},"events.onHover",[501,1833,1834],{},"onLeave","、そしてその上を通るドラッグの ",[501,1837,1838],{},"onDragStart","…",[720,1841,1842,1843,1082,1845,1021,1848,603],{},"同じ要素に ",[501,1844,138],{},[501,1846,1847],{},"onDragEnter",[501,1849,1850],{},"onDragLeave",[702,1852,1853,1862],{},[720,1854,1855,1021,1858,1861],{},[501,1856,1857],{},"isDragging",[501,1859,1860],{},"selected"," を返す",[720,1863,1864],{},"同じです。",[702,1866,1867,1872],{},[720,1868,1869,1861],{},[501,1870,1871],{},"isDragOver",[720,1873,1874,1875,1161,1878,1881,1882,1885,1886,1889],{},"並べ替え可能なアイテムは ",[501,1876,1877],{},"indicator",[501,1879,1880],{},"placeholder: 'indicator'"," のとき）と ",[501,1883,1884],{},"isPlaceholder"," を返し、ドロップターゲットは ",[501,1887,1888],{},"placement"," を返します。",[702,1891,1892,1897],{},[720,1893,1894,1861],{},[501,1895,1896],{},"isAllowed",[720,1898,1814,1899,1901,1902,1889],{},[496,1900,870],{},"。ドロップターゲットは ",[501,1903,1904],{},"isAccepting",[702,1906,1907,1909],{},[720,1908,750],{},[720,1910,1572,1911,1021,1914,1021,1917,1021,1919,1922,1923,1926,1927,1021,1930,1021,1932,1021,1935,603],{},[501,1912,1913],{},"label",[501,1915,1916],{},"axis",[501,1918,1250],{},[501,1920,1921],{},"keyboardMode","、返される ",[501,1924,1925],{},"transform"," と組み合わせる ",[501,1928,1929],{},"overlay: false",[501,1931,1259],{},[501,1933,1934],{},"attributes",[501,1936,1937],{},"native",[873,1939,1941,634],{"id":1940},"makedroppable",[501,1942,138],{},[696,1944,1945,1953],{},[699,1946,1947],{},[702,1948,1949,1951],{},[705,1950,710],{},[705,1952,713],{},[715,1954,1955,1971,1985,2002,2023,2043,2055,2068,2078,2088,2114],{},[702,1956,1957,1962],{},[720,1958,1959],{},[501,1960,1961],{},"makeDroppable(ref, options, () => items)",[720,1963,1964,1967,1968,1970],{},[501,1965,1966],{},"makeDroppable(ref, options)","。リストを持つゾーンは ",[501,1969,143],{}," です。",[702,1972,1973,1977],{},[720,1974,1975],{},[501,1976,574],{},[720,1978,1979,1082,1981,1984],{},[501,1980,1681],{},[501,1982,1983],{},"'*'","、型、型のリスト、または関数。",[702,1986,1987,1995],{},[720,1988,1989,1021,1992],{},[501,1990,1991],{},"groupMatch: 'every'",[501,1993,1994],{},"'some'",[720,1996,1997,1021,2000,603],{},[501,1998,1999],{},"acceptMode: 'all'",[501,2001,1994],{},[702,2003,2004,2012],{},[720,2005,2006,1021,2009],{},[501,2007,2008],{},"events.onEnter",[501,2010,2011],{},"events.onLeave",[720,2013,2014,1021,2016,2018,2019,2022],{},[501,2015,1847],{},[501,2017,1850],{},"：それぞれ独立したオプションで、",[501,2020,2021],{},"events"," オブジェクトはありません。",[702,2024,2025,2033],{},[720,2026,2027,603,2030,2032],{},[501,2028,2029],{},"events.onDrop",[501,2031,1092],{}," や Promise を返せた",[720,2034,2035,2037,2038,2040,2041,1054],{},[501,2036,588],{}," が判断し、",[501,2039,507],{}," が適用します。",[808,2042,344],{"href":1590},[702,2044,2045,2050],{},[720,2046,2047],{},[501,2048,2049],{},"events.onValidate",[720,2051,2052,2053,603],{},"残す id を返す ",[501,2054,588],{},[702,2056,2057,2061],{},[720,2058,2059],{},[501,2060,1427],{},[720,2062,2063,603,2065,1665],{},[501,2064,1427],{},[501,2066,2067],{},"over.data",[702,2069,2070,2074],{},[720,2071,2072],{},[501,2073,1706],{},[720,2075,2076,603],{},[501,2077,1706],{},[702,2079,2080,2084],{},[720,2081,2082,1861],{},[501,2083,1896],{},[720,2085,2086,603],{},[501,2087,1904],{},[702,2089,2090,2098],{},[720,2091,2092,2094,2095],{},[501,2093,1871],{}," を返す：",[501,2096,2097],{},"{ top, right, bottom, left, center }",[720,2099,2100,2103,2104,1082,2106,2109,2110,2113],{},[501,2101,2102],{},"isOver","（真偽値）と ",[501,2105,1888],{},[501,2107,2108],{},"{ top, right, bottom, left }","、ポインターがある側の半分。",[501,2111,2112],{},"center"," はありません。",[702,2115,2116,2118],{},[720,2117,750],{},[720,2119,1572,2120,1021,2122,1021,2124,1021,2127,1021,2130,1021,2133,2136],{},[501,2121,1419],{},[501,2123,1913],{},[501,2125,2126],{},"priority",[501,2128,2129],{},"overOverlay",[501,2131,2132],{},"overDropAnimation",[501,2134,2135],{},"external","（コンピューターからのファイル）。",[873,2138,2140],{"id":2139},"the-drop-event","ドロップイベント",[696,2142,2143,2155],{},[699,2144,2145],{},[702,2146,2147,2153],{},[705,2148,2149,2150],{},"v2 ",[501,2151,2152],{},"IDragEvent",[705,2154,713],{},[715,2156,2157,2181,2193,2212,2246,2262,2275,2292,2314,2331,2343,2373,2385],{},[702,2158,2159,2164],{},[720,2160,2161],{},[501,2162,2163],{},"e.draggedItems",[720,2165,2166,2169,2170,2173,2174,515,2177,2180],{},[501,2167,2168],{},"e.active.items","：それぞれ ",[501,2171,2172],{},"{ id, item, data, label, type }"," で、掴んだアイテムが先頭です。リストは ",[501,2175,2176],{},"e.items",[501,2178,2179],{},"e.keys"," も受け取ります。",[702,2182,2183,2188],{},[720,2184,2185],{},[501,2186,2187],{},"e.draggedItems[0].data",[720,2189,2190,603],{},[501,2191,2192],{},"e.active.data",[702,2194,2195,2203],{},[720,2196,2197,1021,2200],{},[501,2198,2199],{},"e.draggedItems[i].index",[501,2201,2202],{},".items",[720,2204,2205,2206,1021,2209,603],{},"リスト：",[501,2207,2208],{},"e.from",[501,2210,2211],{},"{ list, index }",[702,2213,2214,2225],{},[720,2215,2216,1082,2219,1021,2221,1021,2223],{},[501,2217,2218],{},"e.dropZone",[501,2220,1126],{},[501,2222,1888],{},[501,2224,1427],{},[720,2226,2227,1082,2230,1021,2232,1021,2234,1021,2236,1021,2238,2240,2241,1021,2244,603],{},[501,2228,2229],{},"e.over",[501,2231,1419],{},[501,2233,1427],{},[501,2235,1433],{},[501,2237,1436],{},[501,2239,1135],{},"。リスト：",[501,2242,2243],{},"e.to",[501,2245,2211],{},[702,2247,2248,2253],{},[720,2249,2250],{},[501,2251,2252],{},"e.hoveredDraggable",[720,2254,2255,2257,2258,2261],{},[496,2256,870],{},"：リストは ",[501,2259,2260],{},"e.to.index"," を自分で求めます。",[702,2263,2264,2268],{},[720,2265,2266],{},[501,2267,511],{},[720,2269,2270,2271,2274],{},"リストがドロップを書き込みます。",[501,2272,2273],{},"e.result"," には、そのドロップで変わったすべてのリストの新しい配列が入ります。",[702,2276,2277,2282],{},[720,2278,2279],{},[501,2280,2281],{},"e.helpers.suggestSwap()",[720,2283,2284,2285,603,2288,2291],{},"リストに ",[501,2286,2287],{},"behavior: 'swap'",[501,2289,2290],{},"e.partner"," は入れ替えた相手のアイテムです。",[702,2293,2294,2299],{},[720,2295,2296],{},[501,2297,2298],{},"e.helpers.suggestCopy()",[720,2300,2301,2304,2305,603,2308,1384,2311,1970],{},[501,2302,2303],{},"group: { name, pull: 'clone' }"," またはコピーキー（:kbd{value=\"Alt\"}）と、リストの ",[501,2306,2307],{},"clone",[501,2309,2310],{},"e.mode",[501,2312,2313],{},"'copy'",[702,2315,2316,2321],{},[720,2317,2318],{},[501,2319,2320],{},"e.helpers.suggestRemove()",[720,2322,2323,2324,2327,2328,603],{},"ドロップターゲットでの ",[501,2325,2326],{},"e.source.remove()","、またはリストの ",[501,2329,2330],{},"dropOutside: 'remove'",[702,2332,2333,2338],{},[720,2334,2335],{},[501,2336,2337],{},"result.sameList",[720,2339,2340,603],{},[501,2341,2342],{},"e.sameList",[702,2344,2345,2368],{},[720,2346,2347,1021,2350,1021,2353,1021,2356,1021,2359,1021,2362,1021,2365],{},[501,2348,2349],{},"e.helpers.insertAt",[501,2351,2352],{},"removeAt",[501,2354,2355],{},"removeIndexes",[501,2357,2358],{},"swapAt",[501,2360,2361],{},"getInsertSide",[501,2363,2364],{},"isAtZoneStart",[501,2366,2367],{},"isAtZoneEnd",[720,2369,2370,2372],{},[496,2371,870],{},"。リストには不要です。通常のドロップターゲットでは、データを好きなように変更してください。",[702,2374,2375,2380],{},[720,2376,2377],{},[501,2378,2379],{},"e.provider",[720,2381,2382,603],{},[501,2383,2384],{},"useDnD()",[702,2386,2387,2389],{},[720,2388,750],{},[720,2390,1572,2391,1021,2394,1021,2397,2400,2401,603],{},[501,2392,2393],{},"e.pointer",[501,2395,2396],{},"e.delta",[501,2398,2399],{},"e.position","（ボードにドロップしたアイテムをどこに置くか）、",[501,2402,2310],{},[873,2404,1053],{"id":2405},"sorting",[696,2407,2408,2416],{},[699,2409,2410],{},[702,2411,2412,2414],{},[705,2413,710],{},[705,2415,713],{},[715,2417,2418,2434,2449,2460,2482,2497,2510,2533,2544,2566,2581,2605,2620,2637],{},[702,2419,2420,2429],{},[720,2421,2422,2425,2426,2428],{},[501,2423,2424],{},"() => items"," を渡した ",[501,2427,138],{}," のリスト",[720,2430,2431,603],{},[501,2432,2433],{},"makeSortableList(listRef, { items })",[702,2435,2436,2444],{},[720,2437,2438,2425,2441,2443],{},[501,2439,2440],{},"() => [index, items]",[501,2442,134],{}," の行",[720,2445,2446,603],{},[501,2447,2448],{},"makeSortableItem(el, { item: () => props.task })",[702,2450,2451,2454],{},[720,2452,2453],{},"自分の配列を描画",[720,2455,2456,2457,2459],{},"返された ",[501,2458,1126],{}," を描画：ドラッグ中に並べ替わるドラフトです。",[702,2461,2462,2470],{},[720,2463,2464,1021,2467],{},[501,2465,2466],{},"suggestSort('vertical')",[501,2468,2469],{},"suggestSort('horizontal')",[720,2471,2472,1220,2475,2478,2479,603],{},[501,2473,2474],{},"strategy: 'vertical'",[501,2476,2477],{},"'horizontal'","、または ",[501,2480,2481],{},"'grid'",[702,2483,2484,2494],{},[720,2485,2486,2487,515,2490,2493],{},"参照の比較で元の配列と先の配列を見つけ、",[501,2488,2489],{},"sourceItems",[501,2491,2492],{},"targetItems"," を代入",[720,2495,2496],{},"不要：ドロップが、変わったすべてのリストに書き込みます。",[702,2498,2499,2503],{},[720,2500,2501],{},[501,2502,531],{},[720,2504,2505,2506,2509],{},"組み込み。",[501,2507,2508],{},"animateChanges: true"," で、ドラッグ以外による変化（追加、削除、シャッフル）をアニメーションします。",[702,2511,2512,2521],{},[720,2513,2514,1021,2517,2520],{},[501,2515,2516],{},"isDragOver.top",[501,2518,2519],{},".bottom"," による挿入ライン",[720,2522,2523,2525,2526,603,2529,1054],{},[501,2524,1880],{}," とアイテムの ",[501,2527,2528],{},"indicator.side",[808,2530,2532],{"href":2531},"\u002Fdocs\u002Fguides\u002Fsortable-lists#an-insertion-line","挿入ライン",[702,2534,2535,2540],{},[720,2536,2537],{},[501,2538,2539],{},"suggestSwap()",[720,2541,2542,603],{},[501,2543,2287],{},[702,2545,2546,2556],{},[720,2547,2548,2549,515,2552,2555],{},"コピー専用のパレット（",[501,2550,2551],{},"suggestCopy()",[501,2553,2554],{},"copyOnly"," フラグ）",[720,2557,2558,1021,2561,1021,2564,603],{},[501,2559,2560],{},"group: { name, pull: 'clone', put: false }",[501,2562,2563],{},"sort: false",[501,2565,2307],{},[702,2567,2568,2574],{},[720,2569,2570,2573],{},[501,2571,2572],{},"suggestRemove()"," を使うゴミ箱ゾーン",[720,2575,2576,2478,2579,603],{},[501,2577,2578],{},"makeDroppable(trash, { onDrop: (e) => e.source?.remove() })",[501,2580,2330],{},[702,2582,2583,2586],{},[720,2584,2585],{},"Pinia やイミュータブルなデータ：結果を自分で代入",[720,2587,2588,2590,2591,2593,2594,2597,2598,2600,2601,1054],{},[501,2589,1126],{}," をゲッターにして、",[501,2592,507],{}," で ",[501,2595,2596],{},"e.preventDefault()"," を呼び、",[501,2599,2273],{}," を適用します。",[808,2602,2604],{"href":2603},"\u002Fdocs\u002Fguides\u002Fshared-lists#controlled-lists","制御されたリスト",[702,2606,2607,2613],{},[720,2608,2609,2610],{},"再帰的なツリー：フォルダーごとの droppable と ",[501,2611,2612],{},"applyToTree",[720,2614,2615,2617,2618,1054],{},[501,2616,152],{},"：コンテナーは 1 つで、行は深さとともにフラットに描画されます。",[808,2619,328],{"href":64},[702,2621,2622,2628],{},[720,2623,2624,2627],{},[501,2625,2626],{},"v-model"," を使ったネストしたグループ（グループごとに droppable）",[720,2629,2630,2631,2633,2634,603],{},"リストの中のリスト。すべて同じ ",[501,2632,578],{}," で、それぞれ ",[501,2635,2636],{},"items: defineModel()",[702,2638,2639,2644],{},[720,2640,2641,2642],{},"仮想リスト：すべてのドラッグ可能な要素に ",[501,2643,1419],{},[720,2645,2646,2647,603,2650,1054],{},"ドラフトを仮想化ライブラリに渡し、行に ",[501,2648,2649],{},"id: () => props.item.id",[808,2651,356],{"href":99},[481,2653,2654,2655,2658,2659,2661,2662,1316],{},"移行前後のコードは",[808,2656,811],{"href":2657},"#a-sortable-list","します。リストのすべては",[808,2660,320],{"href":54},"と",[808,2663,324],{"href":59},[873,2665,1686],{"id":574},[481,2667,2668,2669,2671],{},"v2 にはすべてに使う ",[501,2670,574],{}," オプションが 1 つありました。v3 はそれを 2 つに分けます：",[696,2673,2674,2682],{},[699,2675,2676],{},[702,2677,2678,2680],{},[705,2679,710],{},[705,2681,713],{},[715,2683,2684,2696,2708,2725,2744,2758,2777],{},[702,2685,2686,2691],{},[720,2687,2688],{},[501,2689,2690],{},"makeDraggable(el, { groups: ['dev'] })",[720,2692,2693,603],{},[501,2694,2695],{},"makeDraggable(el, { type: 'dev' })",[702,2697,2698,2703],{},[720,2699,2700],{},[501,2701,2702],{},"makeDroppable(el, { groups: ['dev'] })",[720,2704,2705,603],{},[501,2706,2707],{},"makeDroppable(el, { accept: 'dev' })",[702,2709,2710,2716],{},[720,2711,2712,2713],{},"ゾーンの ",[501,2714,2715],{},"groups: ['dev', 'ops']",[720,2717,2718,2721,2722,603],{},[501,2719,2720],{},"accept: ['dev', 'ops']","、または関数：",[501,2723,2724],{},"({ active, items, types }) => boolean",[702,2726,2727,2733],{},[720,2728,2729,2732],{},[501,2730,2731],{},"groups: []","、または指定なし",[720,2734,2735,2737,2738,2740,2741,2743],{},[501,2736,1430],{}," や ",[501,2739,1681],{}," を省きます。v2 のルールはそのままです：型のないドラッグ可能な要素はどのルールにも合い、",[501,2742,1681],{}," のないターゲットはすべてを受け入れます。",[702,2745,2746,2752],{},[720,2747,2748,1021,2750],{},[501,2749,1991],{},[501,2751,1994],{},[720,2753,2754,1021,2756,603],{},[501,2755,1999],{},[501,2757,1994],{},[702,2759,2760,2765],{},[720,2761,2762,2763],{},"リストのゾーンとその行の ",[501,2764,574],{},[720,2766,2767,2769,2770,603,2773,2776],{},[501,2768,143],{}," の ",[501,2771,2772],{},"group: 'board'",[501,2774,2775],{},"group: { name, pull, put }"," で、何が出ていけて何が入れるかを指定します。",[702,2778,2779,2785],{},[720,2780,2781,2769,2783],{},[501,2782,157],{},[501,2784,574],{},[720,2786,2787,603],{},[501,2788,1681],{},[481,2790,2791,2793,2794,2798],{},[501,2792,578],{}," のないリストはそれだけで 1 つのグループになり、ほかのどのリストともアイテムをやり取りしません。v2 では、groups のないゾーンはすべてを受け入れていました。",[808,2795,2797],{"href":2796},"\u002Fdocs\u002Fguides\u002Fdrag-and-drop#which-drags-a-target-takes","ターゲットが受け入れるドラッグ","を参照してください。",[873,2800,336],{"id":2801},"the-overlay",[696,2803,2804,2812],{},[699,2805,2806],{},[702,2807,2808,2810],{},[705,2809,710],{},[705,2811,713],{},[715,2813,2814,2829,2849,2884,2899,2917,2942,2958,2974,3008,3031,3043],{},[702,2815,2816,2822],{},[720,2817,2818,2819,2821],{},"プロバイダーの中に描画され、",[501,2820,1099],{}," でテレポートされるプレビュー",[720,2823,2824,2825,1819,2827,603],{},"常にテレポートされます。行き先は ",[501,2826,558],{},[501,2828,1105],{},[702,2830,2831,2838],{},[720,2832,2833,2834,2837],{},"クローン：同じタグ、その ",[501,2835,2836],{},"innerHTML","、そのサイズ",[720,2839,2840,2841,2844,2845,2848],{},"ディープクローン：フォームの値、",[501,2842,2843],{},"\u003Ccanvas>"," のピクセル、継承されたスタイル、表のセルも一緒に来ます。残すものには ",[501,2846,2847],{},"data-dnd-no-clone"," を付けます。",[702,2850,2851,2859],{},[720,2852,2853,603,2855,2858],{},[501,2854,1767],{},[501,2856,2857],{},"useDnDProvider().entities"," を読む",[720,2860,2861,603,2863,1021,2865,1021,2867,1021,2869,1021,2871,1021,2873,1021,2875,2877,2878,2880,2881,1630],{},[501,2862,1772],{},[501,2864,1126],{},[501,2866,1129],{},[501,2868,1132],{},[501,2870,1135],{},[501,2872,1138],{},[501,2874,1141],{},[501,2876,1144],{}," を props として受け取ります。",[501,2879,860],{}," は不要で、切り替えるには ",[501,2882,2883],{},"shallowRef",[702,2885,2886,2894],{},[720,2887,2888,2890,2891,1117],{},[501,2889,1525],{}," で位置を決める ",[501,2892,2893],{},"#preview",[720,2895,2896,2898],{},[501,2897,829],{}," スロット：ボックスの配置とサイズはライブラリが決めます。何も描画しなければクローンにフォールバックします。",[702,2900,2901,2906],{},[720,2902,2903],{},[501,2904,2905],{},"useDnDProvider().preview.render.value = …",[720,2907,2908,2910,2911,2914,2915,603],{},[501,2909,829],{}," スロット、または ",[501,2912,2913],{},"overlay"," として渡す ",[501,2916,2883],{},[702,2918,2919,2927],{},[720,2920,2921,515,2924,2926],{},[501,2922,2923],{},"onEnter",[501,2925,1834],{}," による、ゾーンの上での見た目の変更",[720,2928,2929,2931,2932,2934,2935,2937,2938,1054],{},[501,2930,138],{}," やリストの ",[501,2933,2129],{},"、またはオーバーレイコンポーネントで ",[501,2936,1132],{}," を読みます。",[808,2939,2941],{"href":2940},"\u002Fdocs\u002Fguides\u002Foverlay#targets-that-change-the-overlay","オーバーレイを変えるターゲット",[702,2943,2944,2949],{},[720,2945,2946],{},[501,2947,2948],{},"\u003CDragPreview v-slot=\"{ draggingMap }\">",[720,2950,2951,2952,603,2954,2957],{},"オーバーレイの props の ",[501,2953,1126],{},[501,2955,2956],{},"\u003CDragPreview :id=\"item.id\" \u002F>"," はクローンを 1 つ描画します。",[702,2959,2960,2966],{},[720,2961,2962,1021,2964],{},[501,2963,1024],{},[501,2965,1020],{},[720,2967,2968,2970,2971,2973],{},[501,2969,1029],{}," モディファイア。見た目だけでなく、ターゲットを探す位置とドロップの ",[501,2972,1578],{}," もスナップします。",[702,2975,2976,2988],{},[720,2977,2978,2980,2981,2984,2985],{},[501,2979,1008],{}," を囲む ",[501,2982,2983],{},"\u003CTransition>"," や motion の ",[501,2986,2987],{},"AnimatePresence",[720,2989,2990,2991,2994,2995,2998,2999,3001,3002,603,3004,1054],{},"持ち上げには ",[501,2992,2993],{},"@starting-style"," 付きの ",[501,2996,2997],{},"overlay-class","、着地には ",[501,3000,1259],{},"、コンポーネント間には ",[501,3003,1277],{},[808,3005,3007],{"href":3006},"\u002Fdocs\u002Fguides\u002Fanimations#the-overlay-lift-tilt-settle","持ち上げ、傾け、落ち着かせる",[702,3009,3010,3015],{},[720,3011,3012],{},[501,3013,3014],{},".dnd-kit-preview",[720,3016,3017,3018,1161,3021,1021,3024,3027,3028,603],{},"ボックスの ",[501,3019,3020],{},"[data-dnd-overlay]",[501,3022,3023],{},"\"dragging\"",[501,3025,3026],{},"\"dropping\"","）と、その中の ",[501,3029,3030],{},"[data-dnd-overlay-content]",[702,3032,3033,3038],{},[720,3034,3035,3036],{},"手作業で更新する ",[501,3037,1528],{},[720,3039,3040,3041,812],{},"ボックスは着地する位置のサイズになります（",[501,3042,1271],{},[702,3044,3045,3048],{},[720,3046,3047],{},"ドロップでプレビューが消える",[720,3049,3050],{},"自分の位置に着地するか、キャンセルで元の位置に戻ります。",[481,3052,3053,3054,1316],{},"詳しくは",[808,3055,3056],{"href":74},"オーバーレイのガイド",[873,3058,3060],{"id":3059},"selection-and-multi-drag","選択とマルチドラッグ",[696,3062,3063,3071],{},[699,3064,3065],{},[702,3066,3067,3069],{},[705,3068,710],{},[705,3070,713],{},[715,3072,3073,3090,3102,3120,3149,3161,3171,3183,3191,3212],{},[702,3074,3075,3082],{},[720,3076,3077,3079,3080],{},[501,3078,134],{}," が返す ",[501,3081,1860],{},[720,3083,3084,515,3086,3079,3088,603],{},[501,3085,134],{},[501,3087,147],{},[501,3089,1860],{},[702,3091,3092,3097],{},[720,3093,3094,3096],{},[501,3095,1443],{},"、要素のセット",[720,3098,3099,3101],{},[501,3100,1449],{},"、id がキー。",[702,3103,3104,3113],{},[720,3105,3106,3108,3109,3112],{},[501,3107,157],{},"：デフォルトで Ctrl（",[501,3110,3111],{},"ControlLeft","）を押したまま",[720,3114,3115,3116,3119],{},"デフォルトではキー不要：エリアの空いている場所を押すと選択枠を描きます。",[501,3117,3118],{},"modifier: { keys: ['Control'], method: 'every' }"," で Ctrl に戻せます。",[702,3121,3122,3131],{},[720,3123,3124,3127,3128],{},[501,3125,3126],{},"KeyboardEvent.code"," としての ",[501,3129,3130],{},"modifier.keys",[720,3132,3133,1161,3136,1021,3139,3142,3143,1161,3146,812],{},[501,3134,3135],{},"KeyboardEvent.key",[501,3137,3138],{},"'Control'",[501,3140,3141],{},"'Shift'","）または ",[501,3144,3145],{},".code",[501,3147,3148],{},"'ControlLeft'",[702,3150,3151,3159],{},[720,3152,3153,1021,3156],{},[501,3154,3155],{},"strategy: 'toggle'",[501,3157,3158],{},"'select'",[720,3160,1864],{},[702,3162,3163,3167],{},[720,3164,3165],{},[501,3166,574],{},[720,3168,3169,603],{},[501,3170,1681],{},[702,3172,3173,3178],{},[720,3174,3175],{},[501,3176,3177],{},"events.onSelected(elements)",[720,3179,3180,603],{},[501,3181,3182],{},"onSelected(ids)",[702,3184,3185,3189],{},[720,3186,3187],{},[501,3188,1706],{},[720,3190,1864],{},[702,3192,3193,3199],{},[720,3194,3195,3196],{},"選択をまとめて動かす ",[501,3197,3198],{},"suggestSort()",[720,3200,3201,3202,1220,3205,1021,3208,3211],{},"リストが動かします。",[501,3203,3204],{},"multiple: 'group'",[501,3206,3207],{},"'gaps'",[501,3209,3210],{},"'stack'"," で、ほかのアイテムが途中でどうするかを決めます。",[702,3213,3214,3220],{},[720,3215,3216,3217],{},"混在した選択のための ",[501,3218,3219],{},"onValidate",[720,3221,3222,3225,3226,603,3228,1054],{},[501,3223,3224],{},"acceptMode: 'some'"," と、id を返す ",[501,3227,588],{},[808,3229,3231],{"href":3230},"\u002Fdocs\u002Fguides\u002Fmulti-drag#taking-only-some","一部だけを受け入れる",[481,3233,3053,3234,1316],{},[808,3235,332],{"href":69},[873,3237,3239],{"id":3238},"axes-bounds-and-snapping","軸、境界、スナップ",[696,3241,3242,3250],{},[699,3243,3244],{},[702,3245,3246,3248],{},[705,3247,710],{},[705,3249,713],{},[715,3251,3252,3268,3280,3299,3310,3331],{},[702,3253,3254,3259],{},[720,3255,3256],{},[501,3257,3258],{},"makeConstraintArea(el, { axis: 'x' })",[720,3260,3261,3264,3265,3267],{},[501,3262,3263],{},"makeDragArea(el, { axis: 'x' })","。その中で始まるドラッグに効きます。",[501,3266,1916],{}," はドラッグ可能な要素、リスト、ツリー、アイテムにも使えます。",[702,3269,3270,3275],{},[720,3271,3272],{},[501,3273,3274],{},"axis: 'both'",[720,3276,3277,3279],{},[501,3278,1916],{}," を省きます。",[702,3281,3282,3287],{},[720,3283,3284],{},[501,3285,3286],{},"restrictToArea: true",[720,3288,3289,3292,3293,515,3296,603],{},[501,3290,3291],{},"makeDragArea(el, { restrictToArea: true })","、またはモディファイアの ",[501,3294,3295],{},"restrictToParent",[501,3297,3298],{},"restrictToElement(el)",[702,3300,3301,3304],{},[720,3302,3303],{},"ルールを分けるための、領域ごとのプロバイダー",[720,3305,3306,3307,3309],{},"プロバイダーは 1 つで、領域ごとに ",[501,3308,162],{},"。そのアイテムはどこへでも動けます。",[702,3311,3312,3319],{},[720,3313,3314,1021,3317],{},[501,3315,3316],{},"\u003CDragPreview :grid=\"20\">",[501,3318,1020],{},[720,3320,3321,931,3324,3327,3328,3330],{},[501,3322,3323],{},"snapToGrid(20)",[501,3325,3326],{},"snapToGrid({ x, y, origin, smooth })"," を、プロバイダー、エリア、リスト、ドラッグ可能な要素の ",[501,3329,1250],{}," に入れます。",[702,3332,3333,3335],{},[720,3334,750],{},[720,3336,1572,3337,1021,3340,1021,3343,3346],{},[501,3338,3339],{},"restrictToWindowEdges",[501,3341,3342],{},"restrictToFirstScrollableAncestor",[501,3344,3345],{},"snapCenterToCursor","、そして自作のモディファイア。",[481,3348,3053,3349,1316],{},[808,3350,340],{"href":79},[873,3352,3354],{"id":3353},"auto-scroll","自動スクロール",[696,3356,3357,3365],{},[699,3358,3359],{},[702,3360,3361,3363],{},[705,3362,710],{},[705,3364,713],{},[715,3366,3367,3382,3405,3424,3442,3454],{},[702,3368,3369,3375],{},[720,3370,3371,3374],{},[501,3372,3373],{},"\u003CDnDProvider :autoScrollViewport=\"true\">","、デフォルトでオフ",[720,3376,3377,3378,3381],{},"デフォルトでオン。ウィンドウとすべてのスクロールコンテナーが対象です。",[501,3379,3380],{},":auto-scroll=\"false\""," でオフにします。",[702,3383,3384,3389],{},[720,3385,3386],{},[501,3387,3388],{},"makeAutoScroll(el, { threshold, speed })",[720,3390,3391,3392,2737,3395,3398,3399,3402,3403,603],{},"不要：",[501,3393,3394],{},"overflow: auto",[501,3396,3397],{},"scroll"," の要素はどれもスクロールします。個別に調整するには ",[501,3400,3401],{},"makeDragArea(el, { autoScroll: { … } })"," またはリストの ",[501,3404,968],{},[702,3406,3407,3413],{},[720,3408,3409,3410],{},"px 単位、または辺ごとの ",[501,3411,3412],{},"threshold",[720,3414,3415,3417,3418,3421,3422,603],{},[501,3416,3412],{},"：コンテナーのサイズに対する割合（",[501,3419,3420],{},"0.2","）で、24〜96 px の範囲。辺ごとのしきい値は",[496,3423,870],{},[702,3425,3426,3432],{},[720,3427,3428,3429],{},"倍率の ",[501,3430,3431],{},"speed",[720,3433,3434,3437,3438,3441],{},[501,3435,3436],{},"maxSpeed","（1 フレームあたり 25 px）と ",[501,3439,3440],{},"acceleration","（10）。",[702,3443,3444,3449],{},[720,3445,3446],{},[501,3447,3448],{},"disabled: true",[720,3450,3451,603],{},[501,3452,3453],{},"autoScroll: false",[702,3455,3456,3461],{},[720,3457,3458],{},[501,3459,3460],{},"isScrolling",[720,3462,3463,603,3465,931,3467,3469],{},[501,3464,1581],{},[501,3466,162],{},[501,3468,2384],{}," から。",[873,3471,3473],{"id":3472},"keyboard-and-accessibility","キーボードとアクセシビリティ",[696,3475,3476,3484],{},[699,3477,3478],{},[702,3479,3480,3482],{},[705,3481,710],{},[705,3483,713],{},[715,3485,3486,3513,3527,3548,3566,3581],{},[702,3487,3488,3494],{},[720,3489,3490,3491],{},"すべてのドラッグ可能な要素に ",[501,3492,3493],{},"tabindex=\"0\"",[720,3495,3496,3497,1021,3500,1021,3503,1021,3506,1021,3509,3512],{},"自動で設定され、",[501,3498,3499],{},"role",[501,3501,3502],{},"aria-roledescription",[501,3504,3505],{},"aria-describedby",[501,3507,3508],{},"aria-disabled",[501,3510,3511],{},"aria-pressed"," も付きます。自分で付けた属性が優先されます。",[702,3514,3515,3521],{},[720,3516,3517,3518],{},"手書きの ",[501,3519,3520],{},":aria-grabbed=\"isDragging\"",[720,3522,3523,3524,3526],{},"削除します：",[501,3525,3511],{}," がドラッグに追従します。",[702,3528,3529,3535],{},[720,3530,3531,3534],{},[501,3532,3533],{},"useDnDProvider().keyboard.keys"," で設定したキー",[720,3536,3537,3538,3541,3542,931,3545,1682],{},"プロバイダーの ",[501,3539,3540],{},"keyboard"," prop。割り当ては ",[501,3543,3544],{},"event.code",[501,3546,3547],{},"event.key",[702,3549,3550,3556],{},[720,3551,3552,3553,3555],{},"矢印キーでプレビューを ",[501,3554,1177],{}," ずつ動かす",[720,3557,3558,3559,3561,3562,3565],{},"自由なドラッグ：",[501,3560,1177],{}," px ずつ。リスト：位置ごとに、そしてグループの次のリストへ。",[501,3563,3564],{},"keyboardMode: 'droppables'"," はターゲット間をジャンプします。",[702,3567,3568,3577],{},[720,3569,3570,3571,1021,3574,3576],{},"矢印キーの再割り当て（",[501,3572,3573],{},"forMove",[501,3575,1193],{},"）",[720,3578,3579,603],{},[496,3580,870],{},[702,3582,3583,3586],{},[720,3584,3585],{},"読み上げなし",[720,3587,3588,3589,3591,3592,515,3594,3596],{},"ライブリージョンが、持ち上げ、移動、ドロップ、キャンセルのたびに読み上げます。",[501,3590,1913],{}," が名前を付け、",[501,3593,1283],{},[501,3595,1286],{}," が言い回しを変えます。",[481,3598,3053,3599,1316],{},[808,3600,352],{"href":94},[873,3602,1591],{"id":3603},"events-and-drop-decisions",[696,3605,3606,3614],{},[699,3607,3608],{},[702,3609,3610,3612],{},[705,3611,710],{},[705,3613,713],{},[715,3615,3616,3635,3647,3667,3677,3698,3713,3729,3742],{},[702,3617,3618,3623],{},[720,3619,3620,3621],{},"ドラッグ可能な要素の ",[501,3622,1802],{},[720,3624,3625,2593,3628,3631,3632,3634],{},[501,3626,3627],{},"useDnDMonitor({ onDragStart })",[501,3629,3630],{},"active.ids"," を確認します。クラスを付けるだけなら ",[501,3633,1857],{}," で十分です。",[702,3636,3637,3641],{},[720,3638,3639],{},[501,3640,1805],{},[720,3642,3643,3644,603],{},"モニターの ",[501,3645,3646],{},"onDragMove",[702,3648,3649,3654],{},[720,3650,3651,3653],{},[501,3652,1808],{},"、ドロップでもキャンセルでも",[720,3655,3643,3656,3659,3660,603,3663,3666],{},[501,3657,3658],{},"onDragEnd","（ドロップ）と ",[501,3661,3662],{},"onDragCancel",[501,3664,3665],{},"onDragSettle"," はオーバーレイが着地した後に両方を受け取ります。",[702,3668,3669,3673],{},[720,3670,3671],{},[501,3672,1811],{},[720,3674,3643,3675,603],{},[501,3676,3662],{},[702,3678,3679,3688],{},[720,3680,3620,3681,1021,3684,1835,3686,1839],{},[501,3682,3683],{},"onHover",[501,3685,1834],{},[501,3687,1838],{},[720,3689,3690,3691,1082,3693,1021,3695,3697],{},"その要素に ",[501,3692,138],{},[501,3694,1847],{},[501,3696,1850],{},"。リストの行には何も要りません。",[702,3699,3700,3707],{},[720,3701,3702,3703,1021,3705],{},"droppable の ",[501,3704,2008],{},[501,3706,1834],{},[720,3708,3709,1021,3711,603],{},[501,3710,1847],{},[501,3712,1850],{},[702,3714,3715,3719],{},[720,3716,3702,3717],{},[501,3718,2029],{},[720,3720,3721,3723,3724,2040,3726,3728],{},[501,3722,588],{}," が判断し、次に ",[501,3725,507],{},[501,3727,507],{}," は同期で、戻り値は無視されます。",[702,3730,3731,3735],{},[720,3732,3702,3733],{},[501,3734,2049],{},[720,3736,3737,3739,3740,603],{},[501,3738,3224],{}," と組み合わせた ",[501,3741,588],{},[702,3743,3744,3746],{},[720,3745,750],{},[720,3747,3748,3749,3752,3753,3756,3757,1021,3760,1021,3762,603],{},"新規：プロバイダーの ",[501,3750,3751],{},"@drag-start"," … ",[501,3754,3755],{},"@drag-settle","、そしてモニターの ",[501,3758,3759],{},"onDragOver",[501,3761,588],{},[501,3763,3764],{},"onDragResume",[481,3766,3767,3768,3770,3771,3773],{},"v2 の ",[501,3769,507],{}," は、値やその Promise を返してドロップを決められました。v3 ではそれは ",[501,3772,588],{}," の役目で、リスト、ツリー、ドロップターゲット、モニターにあります：",[696,3775,3776,3790],{},[699,3777,3778],{},[702,3779,3780,3785],{},[705,3781,3767,3782,3784],{},[501,3783,507],{}," の戻り値",[705,3786,3787,3788,3784],{},"v3 の ",[501,3789,588],{},[715,3791,3792,3809,3827,3840,3860],{},[702,3793,3794,3801],{},[720,3795,3796,3797,3800],{},"何も返さない、または ",[501,3798,3799],{},"true","：ドロップが成立する",[720,3802,3803,1021,3806,3808],{},[501,3804,3805],{},"'accept'",[501,3807,3799],{},"、または何も返さない。",[702,3810,3811,3816],{},[720,3812,3813,3815],{},[501,3814,1092],{},"：このドロップは見送られ、ドラッグは続く",[720,3817,3818,603,3821,603],{},[501,3819,3820],{},"'continue'",[496,3822,3823,3824,3826],{},"今は ",[501,3825,1092],{}," でドロップが拒否されます",[702,3828,3829,3832],{},[720,3830,3831],{},"reject された Promise や例外：ドラッグがキャンセルされる",[720,3833,3834,931,3837,3839],{},[501,3835,3836],{},"'reject'",[501,3838,1092],{},"。例外も拒否になります。",[702,3841,3842,3849],{},[720,3843,3844,3845,1384,3847],{},"Promise。その間 ",[501,3846,1343],{},[501,3848,1355],{},[720,3850,3844,3851,1384,3853,3855,3856,3859],{},[501,3852,1138],{},[501,3854,1373],{}," で、オーバーレイは ",[501,3857,3858],{},"data-dnd-overlay=\"dropping\""," の状態で待ちます。",[702,3861,3862,3869],{},[720,3863,3864,606,3866,1861],{},[501,3865,3219],{},[501,3867,3868],{},"IDragItem[]",[720,3870,3871],{},"id の配列：それらだけがドロップされ、ほかは元の位置に戻ります。",[481,3873,3874,3875,3877,3878,3880,3881,2661,3883,1596],{},"まずモニターが答え、次にターゲットが答えます。そのあとターゲットの ",[501,3876,507],{}," が実行され、リストが新しい配列を書き込み、",[501,3879,3658],{}," が続きます。詳しくは",[808,3882,344],{"href":84},[808,3884,3885],{"href":173},"イベントの API",[873,3887,3889],{"id":3888},"types","型",[696,3891,3892,3900],{},[699,3893,3894],{},[702,3895,3896,3898],{},[705,3897,710],{},[705,3899,713],{},[715,3901,3902,3923,3935,3947,3958,3988,4002,4017,4029,4041,4053,4065,4080],{},[702,3903,3904,3908],{},[720,3905,3906],{},[501,3907,2152],{},[720,3909,3910,3913,3914,3917,3918,1161,3921,812],{},[501,3911,3912],{},"DnDEvent","（ドロップターゲット、モニター）、",[501,3915,3916],{},"SortableDropEvent","（リスト）、",[501,3919,3920],{},"DnDEndEvent",[501,3922,3658],{},[702,3924,3925,3930],{},[720,3926,3927],{},[501,3928,3929],{},"IDragItem",[720,3931,3932,603],{},[501,3933,3934],{},"DragItem",[702,3936,3937,3942],{},[720,3938,3939],{},[501,3940,3941],{},"IDropZoneContext",[720,3943,3944,603],{},[501,3945,3946],{},"Over",[702,3948,3949,3954],{},[720,3950,3951],{},[501,3952,3953],{},"IHoveredDraggableContext",[720,3955,3956,603],{},[496,3957,870],{},[702,3959,3960,3974],{},[720,3961,3962,1021,3965,1021,3968,1021,3971],{},[501,3963,3964],{},"ISuggestSortResult",[501,3966,3967],{},"ISuggestSwapResult",[501,3969,3970],{},"ISuggestCopyResult",[501,3972,3973],{},"ISuggestRemoveResult",[720,3975,3976,1082,3978,1021,3981,1021,3983,1021,3985,603],{},[501,3977,3916],{},[501,3979,3980],{},"result",[501,3982,1144],{},[501,3984,1141],{},[501,3986,3987],{},"partner",[702,3989,3990,3995],{},[720,3991,3992],{},[501,3993,3994],{},"IDropValidateEvent",[720,3996,3997,3999,4000,603],{},[501,3998,588],{}," の中の ",[501,4001,3912],{},[702,4003,4004,4009],{},[720,4005,4006],{},[501,4007,4008],{},"IPlacement",[720,4010,4011,4013,4014,603],{},[501,4012,2112],{}," のない ",[501,4015,4016],{},"Placement",[702,4018,4019,4024],{},[720,4020,4021],{},[501,4022,4023],{},"ICoordinates",[720,4025,4026,603],{},[501,4027,4028],{},"Coordinates",[702,4030,4031,4036],{},[720,4032,4033],{},[501,4034,4035],{},"IDragActivationOptions",[720,4037,4038,603],{},[501,4039,4040],{},"ActivationOptions",[702,4042,4043,4048],{},[720,4044,4045],{},[501,4046,4047],{},"IAutoScrollOptions",[720,4049,4050,603],{},[501,4051,4052],{},"AutoScrollOptions",[702,4054,4055,4060],{},[720,4056,4057],{},[501,4058,4059],{},"TDnDState",[720,4061,4062,603],{},[501,4063,4064],{},"DnDStatus",[702,4066,4067,4072],{},[720,4068,4069],{},[501,4070,4071],{},"IDnDProviderExternal",[720,4073,4074,603,4077,4079],{},[501,4075,4076],{},"DnDState",[501,4078,2384],{}," が返すものです。",[702,4081,4082,4090],{},[720,4083,4084,1021,4087],{},[501,4085,4086],{},"IDraggableEvents",[501,4088,4089],{},"IDroppableEvents",[720,4091,4092,1021,4095,1021,4098,4101],{},[501,4093,4094],{},"DraggableOptions",[501,4096,4097],{},"DroppableOptions",[501,4099,4100],{},"DnDMonitor"," の中のコールバック。",[873,4103,4105],{"id":4104},"nuxt","Nuxt",[628,4107,4109],{"className":630,"code":4108,"language":633,"meta":634,"style":634},"npm i @vue-dnd-kit\u002Fnuxt@^3 @vue-dnd-kit\u002Fcore@^3\n",[501,4110,4111],{"__ignoreMap":634},[638,4112,4113,4115,4117,4120],{"class":640,"line":641},[638,4114,632],{"class":644},[638,4116,648],{"class":647},[638,4118,4119],{"class":647}," @vue-dnd-kit\u002Fnuxt@^3",[638,4121,651],{"class":647},[696,4123,4124,4140],{},[699,4125,4126],{},[702,4127,4128,4134],{},[705,4129,4130,4131,4133],{},"v2（",[501,4132,736],{}," 1.x）",[705,4135,4136,4137,4139],{},"v3（",[501,4138,736],{}," 3.x）",[715,4141,4142,4180,4205,4215,4230,4246],{},[702,4143,4144,4159],{},[720,4145,4146,1021,4148,1021,4150,1021,4152,1021,4154,1021,4156,4158],{},[501,4147,134],{},[501,4149,138],{},[501,4151,157],{},[501,4153,609],{},[501,4155,612],{},[501,4157,976],{}," を自動インポート",[720,4160,4161,1021,4163,1021,4165,1021,4167,1021,4169,1021,4171,1021,4173,1021,4175,1021,4177,4179],{},[501,4162,134],{},[501,4164,138],{},[501,4166,143],{},[501,4168,147],{},[501,4170,152],{},[501,4172,157],{},[501,4174,162],{},[501,4176,982],{},[501,4178,986],{}," を自動インポート。",[702,4181,4182,4185],{},[720,4183,4184],{},"型は自動インポートされない",[720,4186,4187,4188,1021,4190,1021,4192,4195,4196,1021,4199,1021,4202,4204],{},"主な型は自動インポートされます（",[501,4189,3912],{},[501,4191,3916],{},[501,4193,4194],{},"OverlayProps","…）。汎用的な型（",[501,4197,4198],{},"Key",[501,4200,4201],{},"Active",[501,4203,3946],{},"）は手動でインポートします。",[702,4206,4207,4209],{},[720,4208,750],{},[720,4210,4211,4212,603],{},"モディファイア、衝突判定の関数、センサーは必要に応じて：",[501,4213,4214],{},"vueDndKit: { autoImports: { modifiers: true, collision: true, sensors: true } }",[702,4216,4217,4224],{},[720,4218,4219,515,4221,4223],{},[501,4220,129],{},[501,4222,1008],{}," がグローバル",[720,4225,1864,4226,4229],{},[501,4227,4228],{},"prefix"," オプションがあります。",[702,4231,4232,4238],{},[720,4233,4234,4235],{},"レイアウトの、プロバイダーの中の ",[501,4236,4237],{},"\u003CDragPreview \u002F>",[720,4239,4240,4241,1384,4243,4245],{},"削除します：オーバーレイはプロバイダーが描画します。",[501,4242,1008],{},[501,4244,1419],{}," を受け取り、オーバーレイコンポーネントの中で使います。",[702,4247,4248,4254],{},[720,4249,4250,4251,4253],{},"peer 依存 ",[501,4252,541],{}," 2",[720,4255,4250,4256,4258],{},[501,4257,541],{}," 3、Nuxt 4。",[481,4260,4261,2769,4264,4267,4268,2798],{},[501,4262,4263],{},"nuxt.config.ts",[501,4265,4266],{},"modules: ['@vue-dnd-kit\u002Fnuxt']"," はそのままです。",[808,4269,294],{"href":4270},"\u002Fdocs\u002Fgetting-started\u002Finstallation#nuxt",[485,4272,4274],{"id":4273},"before-and-after","移行前と移行後",[873,4276,4278],{"id":4277},"a-draggable-and-a-drop-zone","ドラッグ可能な要素とドロップゾーン",[481,4280,4281],{},[496,4282,710],{},[628,4284,4289],{"className":4285,"code":4286,"filename":4287,"language":4288,"meta":634,"style":634},"language-vue shiki shiki-themes dnd-light dnd-light dnd-dark","\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeDraggable } from '@vue-dnd-kit\u002Fcore';\n\nconst props = defineProps\u003C{ card: Card }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\nconst { isDragging } = makeDraggable(el, {\n  groups: ['task'],\n  dragHandle: '.handle',\n  data: () => props.card,\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"el\" tabindex=\"0\" :class=\"{ dragging: isDragging }\">\n    \u003Cspan class=\"handle\">⋮⋮\u003C\u002Fspan>\n    {{ card.title }}\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","Card.vue","vue",[501,4290,4291,4314,4340,4359,4366,4396,4424,4429,4459,4476,4490,4515,4521,4527,4532,4538,4570,4593,4599,4605],{"__ignoreMap":634},[638,4292,4293,4297,4301,4304,4308,4311],{"class":640,"line":641},[638,4294,4296],{"class":4295},"sf6mc","\u003Cscript",[638,4298,4300],{"class":4299},"sVvmN"," setup",[638,4302,4303],{"class":4299}," lang",[638,4305,4307],{"class":4306},"s6cML","=",[638,4309,4310],{"class":647},"\"ts\"",[638,4312,4313],{"class":4295},">\n",[638,4315,4317,4321,4324,4328,4331,4334,4337],{"class":640,"line":4316},2,[638,4318,4320],{"class":4319},"s78Kj","import",[638,4322,4323],{"class":4306}," {",[638,4325,4327],{"class":4326},"snmWg"," useTemplateRef ",[638,4329,4330],{"class":4306},"}",[638,4332,4333],{"class":4319}," from",[638,4335,4336],{"class":647}," 'vue'",[638,4338,4339],{"class":4306},";\n",[638,4341,4343,4345,4347,4350,4352,4354,4357],{"class":640,"line":4342},3,[638,4344,4320],{"class":4319},[638,4346,4323],{"class":4306},[638,4348,4349],{"class":4326}," makeDraggable ",[638,4351,4330],{"class":4306},[638,4353,4333],{"class":4319},[638,4355,4356],{"class":647}," '@vue-dnd-kit\u002Fcore'",[638,4358,4339],{"class":4306},[638,4360,4362],{"class":640,"line":4361},4,[638,4363,4365],{"emptyLinePlaceholder":4364},true,"\n",[638,4367,4369,4372,4375,4377,4380,4383,4386,4389,4393],{"class":640,"line":4368},5,[638,4370,4371],{"class":4319},"const",[638,4373,4374],{"class":4326}," props ",[638,4376,4307],{"class":4306},[638,4378,4379],{"class":644}," defineProps",[638,4381,4382],{"class":4306},"\u003C{",[638,4384,4385],{"class":4326}," card",[638,4387,4388],{"class":4306},":",[638,4390,4392],{"class":4391},"sR6Ar"," Card",[638,4394,4395],{"class":4306}," }>();\n",[638,4397,4399,4401,4404,4406,4409,4412,4415,4418,4421],{"class":640,"line":4398},6,[638,4400,4371],{"class":4319},[638,4402,4403],{"class":4326}," el ",[638,4405,4307],{"class":4306},[638,4407,4408],{"class":644}," useTemplateRef",[638,4410,4411],{"class":4306},"\u003C",[638,4413,4414],{"class":4391},"HTMLElement",[638,4416,4417],{"class":4306},">(",[638,4419,4420],{"class":647},"'el'",[638,4422,4423],{"class":4306},");\n",[638,4425,4427],{"class":640,"line":4426},7,[638,4428,4365],{"emptyLinePlaceholder":4364},[638,4430,4432,4434,4436,4439,4441,4444,4447,4450,4453,4456],{"class":640,"line":4431},8,[638,4433,4371],{"class":4319},[638,4435,4323],{"class":4306},[638,4437,4438],{"class":4326}," isDragging ",[638,4440,4330],{"class":4306},[638,4442,4443],{"class":4306}," =",[638,4445,4446],{"class":644}," makeDraggable",[638,4448,4449],{"class":4306},"(",[638,4451,4452],{"class":4326},"el",[638,4454,4455],{"class":4306},",",[638,4457,4458],{"class":4306}," {\n",[638,4460,4462,4465,4467,4470,4473],{"class":640,"line":4461},9,[638,4463,4464],{"class":4299},"  groups",[638,4466,4388],{"class":4306},[638,4468,4469],{"class":4306}," [",[638,4471,4472],{"class":647},"'task'",[638,4474,4475],{"class":4306},"],\n",[638,4477,4479,4482,4484,4487],{"class":640,"line":4478},10,[638,4480,4481],{"class":4299},"  dragHandle",[638,4483,4388],{"class":4306},[638,4485,4486],{"class":647}," '.handle'",[638,4488,4489],{"class":4306},",\n",[638,4491,4493,4496,4498,4501,4504,4507,4510,4513],{"class":640,"line":4492},11,[638,4494,4495],{"class":644},"  data",[638,4497,4388],{"class":4306},[638,4499,4500],{"class":4306}," ()",[638,4502,4503],{"class":4319}," =>",[638,4505,4506],{"class":4326}," props",[638,4508,4509],{"class":4306},".",[638,4511,4512],{"class":4326},"card",[638,4514,4489],{"class":4306},[638,4516,4518],{"class":640,"line":4517},12,[638,4519,4520],{"class":4306},"});\n",[638,4522,4524],{"class":640,"line":4523},13,[638,4525,4526],{"class":4295},"\u003C\u002Fscript>\n",[638,4528,4530],{"class":640,"line":4529},14,[638,4531,4365],{"emptyLinePlaceholder":4364},[638,4533,4535],{"class":640,"line":4534},15,[638,4536,4537],{"class":4295},"\u003Ctemplate>\n",[638,4539,4541,4544,4547,4549,4552,4555,4557,4560,4563,4565,4568],{"class":640,"line":4540},16,[638,4542,4543],{"class":4295},"  \u003Cdiv",[638,4545,4546],{"class":4299}," ref",[638,4548,4307],{"class":4306},[638,4550,4551],{"class":647},"\"el\"",[638,4553,4554],{"class":4299}," tabindex",[638,4556,4307],{"class":4306},[638,4558,4559],{"class":647},"\"0\"",[638,4561,4562],{"class":4299}," :class",[638,4564,4307],{"class":4306},[638,4566,4567],{"class":647},"\"{ dragging: isDragging }\"",[638,4569,4313],{"class":4295},[638,4571,4573,4576,4579,4581,4584,4587,4590],{"class":640,"line":4572},17,[638,4574,4575],{"class":4295},"    \u003Cspan",[638,4577,4578],{"class":4299}," class",[638,4580,4307],{"class":4306},[638,4582,4583],{"class":647},"\"handle\"",[638,4585,4586],{"class":4295},">",[638,4588,4589],{"class":4326},"⋮⋮",[638,4591,4592],{"class":4295},"\u003C\u002Fspan>\n",[638,4594,4596],{"class":640,"line":4595},18,[638,4597,4598],{"class":4326},"    {{ card.title }}\n",[638,4600,4602],{"class":640,"line":4601},19,[638,4603,4604],{"class":4295},"  \u003C\u002Fdiv>\n",[638,4606,4608],{"class":640,"line":4607},20,[638,4609,4610],{"class":4295},"\u003C\u002Ftemplate>\n",[628,4612,4615],{"className":4285,"code":4613,"filename":4614,"language":4288,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeDroppable } from '@vue-dnd-kit\u002Fcore';\n\nconst emit = defineEmits\u003C{ drop: [cards: Card[]] }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\nconst { isDragOver, isAllowed } = makeDroppable(el, {\n  groups: ['task'],\n  events: {\n    onDrop: (e) => emit('drop', e.draggedItems.map((item) => item.data as Card)),\n  },\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"el\" :class=\"{ over: isDragOver && isAllowed }\">\u003Cslot \u002F>\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","Zone.vue",[501,4616,4617,4631,4647,4664,4668,4701,4721,4725,4754,4766,4775,4842,4847,4851,4855,4859,4863,4889],{"__ignoreMap":634},[638,4618,4619,4621,4623,4625,4627,4629],{"class":640,"line":641},[638,4620,4296],{"class":4295},[638,4622,4300],{"class":4299},[638,4624,4303],{"class":4299},[638,4626,4307],{"class":4306},[638,4628,4310],{"class":647},[638,4630,4313],{"class":4295},[638,4632,4633,4635,4637,4639,4641,4643,4645],{"class":640,"line":4316},[638,4634,4320],{"class":4319},[638,4636,4323],{"class":4306},[638,4638,4327],{"class":4326},[638,4640,4330],{"class":4306},[638,4642,4333],{"class":4319},[638,4644,4336],{"class":647},[638,4646,4339],{"class":4306},[638,4648,4649,4651,4653,4656,4658,4660,4662],{"class":640,"line":4342},[638,4650,4320],{"class":4319},[638,4652,4323],{"class":4306},[638,4654,4655],{"class":4326}," makeDroppable ",[638,4657,4330],{"class":4306},[638,4659,4333],{"class":4319},[638,4661,4356],{"class":647},[638,4663,4339],{"class":4306},[638,4665,4666],{"class":640,"line":4361},[638,4667,4365],{"emptyLinePlaceholder":4364},[638,4669,4670,4672,4675,4677,4680,4682,4685,4687,4689,4692,4694,4696,4699],{"class":640,"line":4368},[638,4671,4371],{"class":4319},[638,4673,4674],{"class":4326}," emit ",[638,4676,4307],{"class":4306},[638,4678,4679],{"class":644}," defineEmits",[638,4681,4382],{"class":4306},[638,4683,4684],{"class":4326}," drop",[638,4686,4388],{"class":4306},[638,4688,4469],{"class":4306},[638,4690,4691],{"class":4326},"cards",[638,4693,4388],{"class":4306},[638,4695,4392],{"class":4391},[638,4697,4698],{"class":4306},"[]]",[638,4700,4395],{"class":4306},[638,4702,4703,4705,4707,4709,4711,4713,4715,4717,4719],{"class":640,"line":4398},[638,4704,4371],{"class":4319},[638,4706,4403],{"class":4326},[638,4708,4307],{"class":4306},[638,4710,4408],{"class":644},[638,4712,4411],{"class":4306},[638,4714,4414],{"class":4391},[638,4716,4417],{"class":4306},[638,4718,4420],{"class":647},[638,4720,4423],{"class":4306},[638,4722,4723],{"class":640,"line":4426},[638,4724,4365],{"emptyLinePlaceholder":4364},[638,4726,4727,4729,4731,4734,4736,4739,4741,4743,4746,4748,4750,4752],{"class":640,"line":4431},[638,4728,4371],{"class":4319},[638,4730,4323],{"class":4306},[638,4732,4733],{"class":4326}," isDragOver",[638,4735,4455],{"class":4306},[638,4737,4738],{"class":4326}," isAllowed ",[638,4740,4330],{"class":4306},[638,4742,4443],{"class":4306},[638,4744,4745],{"class":644}," makeDroppable",[638,4747,4449],{"class":4306},[638,4749,4452],{"class":4326},[638,4751,4455],{"class":4306},[638,4753,4458],{"class":4306},[638,4755,4756,4758,4760,4762,4764],{"class":640,"line":4461},[638,4757,4464],{"class":4299},[638,4759,4388],{"class":4306},[638,4761,4469],{"class":4306},[638,4763,4472],{"class":647},[638,4765,4475],{"class":4306},[638,4767,4768,4771,4773],{"class":640,"line":4478},[638,4769,4770],{"class":4299},"  events",[638,4772,4388],{"class":4306},[638,4774,4458],{"class":4306},[638,4776,4777,4780,4782,4785,4788,4791,4793,4796,4798,4801,4803,4806,4808,4811,4813,4816,4819,4822,4824,4826,4829,4831,4834,4837,4839],{"class":640,"line":4492},[638,4778,4779],{"class":644},"    onDrop",[638,4781,4388],{"class":4306},[638,4783,4784],{"class":4306}," (",[638,4786,4787],{"class":4299},"e",[638,4789,4790],{"class":4306},")",[638,4792,4503],{"class":4319},[638,4794,4795],{"class":644}," emit",[638,4797,4449],{"class":4306},[638,4799,4800],{"class":647},"'drop'",[638,4802,4455],{"class":4306},[638,4804,4805],{"class":644}," e",[638,4807,4509],{"class":4306},[638,4809,4810],{"class":644},"draggedItems",[638,4812,4509],{"class":4306},[638,4814,4815],{"class":644},"map",[638,4817,4818],{"class":4306},"((",[638,4820,4821],{"class":4299},"item",[638,4823,4790],{"class":4306},[638,4825,4503],{"class":4319},[638,4827,4828],{"class":4326}," item",[638,4830,4509],{"class":4306},[638,4832,4833],{"class":4326},"data ",[638,4835,4836],{"class":4319},"as",[638,4838,4392],{"class":4391},[638,4840,4841],{"class":4306},")),\n",[638,4843,4844],{"class":640,"line":4517},[638,4845,4846],{"class":4306},"  },\n",[638,4848,4849],{"class":640,"line":4523},[638,4850,4520],{"class":4306},[638,4852,4853],{"class":640,"line":4529},[638,4854,4526],{"class":4295},[638,4856,4857],{"class":640,"line":4534},[638,4858,4365],{"emptyLinePlaceholder":4364},[638,4860,4861],{"class":640,"line":4540},[638,4862,4537],{"class":4295},[638,4864,4865,4867,4869,4871,4873,4875,4877,4880,4883,4886],{"class":640,"line":4572},[638,4866,4543],{"class":4295},[638,4868,4546],{"class":4299},[638,4870,4307],{"class":4306},[638,4872,4551],{"class":647},[638,4874,4562],{"class":4299},[638,4876,4307],{"class":4306},[638,4878,4879],{"class":647},"\"{ over: isDragOver && isAllowed }\"",[638,4881,4882],{"class":4295},">\u003Cslot",[638,4884,4885],{"class":4326}," \u002F",[638,4887,4888],{"class":4295},">\u003C\u002Fdiv>\n",[638,4890,4891],{"class":640,"line":4595},[638,4892,4610],{"class":4295},[481,4894,4895],{},[496,4896,713],{},[628,4898,4900],{"className":4285,"code":4899,"filename":4287,"language":4288,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeDraggable } from '@vue-dnd-kit\u002Fcore';\n\nconst props = defineProps\u003C{ card: Card }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\nconst { isDragging } = makeDraggable(el, {\n  id: () => props.card.id,   \u002F\u002F read back as `active.id`\n  type: 'task',              \u002F\u002F matched by the targets' `accept`\n  handle: '.handle',\n  data: () => props.card,\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"el\" :class=\"{ dragging: isDragging }\">\n    \u003Cbutton type=\"button\" class=\"handle\" :aria-label=\"`Move ${card.title}`\">⋮⋮\u003C\u002Fbutton>\n    {{ card.title }}\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[501,4901,4902,4916,4932,4948,4952,4972,4992,4996,5018,5045,5060,5071,5089,5093,5097,5101,5105,5123,5157,5161,5165],{"__ignoreMap":634},[638,4903,4904,4906,4908,4910,4912,4914],{"class":640,"line":641},[638,4905,4296],{"class":4295},[638,4907,4300],{"class":4299},[638,4909,4303],{"class":4299},[638,4911,4307],{"class":4306},[638,4913,4310],{"class":647},[638,4915,4313],{"class":4295},[638,4917,4918,4920,4922,4924,4926,4928,4930],{"class":640,"line":4316},[638,4919,4320],{"class":4319},[638,4921,4323],{"class":4306},[638,4923,4327],{"class":4326},[638,4925,4330],{"class":4306},[638,4927,4333],{"class":4319},[638,4929,4336],{"class":647},[638,4931,4339],{"class":4306},[638,4933,4934,4936,4938,4940,4942,4944,4946],{"class":640,"line":4342},[638,4935,4320],{"class":4319},[638,4937,4323],{"class":4306},[638,4939,4349],{"class":4326},[638,4941,4330],{"class":4306},[638,4943,4333],{"class":4319},[638,4945,4356],{"class":647},[638,4947,4339],{"class":4306},[638,4949,4950],{"class":640,"line":4361},[638,4951,4365],{"emptyLinePlaceholder":4364},[638,4953,4954,4956,4958,4960,4962,4964,4966,4968,4970],{"class":640,"line":4368},[638,4955,4371],{"class":4319},[638,4957,4374],{"class":4326},[638,4959,4307],{"class":4306},[638,4961,4379],{"class":644},[638,4963,4382],{"class":4306},[638,4965,4385],{"class":4326},[638,4967,4388],{"class":4306},[638,4969,4392],{"class":4391},[638,4971,4395],{"class":4306},[638,4973,4974,4976,4978,4980,4982,4984,4986,4988,4990],{"class":640,"line":4398},[638,4975,4371],{"class":4319},[638,4977,4403],{"class":4326},[638,4979,4307],{"class":4306},[638,4981,4408],{"class":644},[638,4983,4411],{"class":4306},[638,4985,4414],{"class":4391},[638,4987,4417],{"class":4306},[638,4989,4420],{"class":647},[638,4991,4423],{"class":4306},[638,4993,4994],{"class":640,"line":4426},[638,4995,4365],{"emptyLinePlaceholder":4364},[638,4997,4998,5000,5002,5004,5006,5008,5010,5012,5014,5016],{"class":640,"line":4431},[638,4999,4371],{"class":4319},[638,5001,4323],{"class":4306},[638,5003,4438],{"class":4326},[638,5005,4330],{"class":4306},[638,5007,4443],{"class":4306},[638,5009,4446],{"class":644},[638,5011,4449],{"class":4306},[638,5013,4452],{"class":4326},[638,5015,4455],{"class":4306},[638,5017,4458],{"class":4306},[638,5019,5020,5023,5025,5027,5029,5031,5033,5035,5037,5039,5041],{"class":640,"line":4461},[638,5021,5022],{"class":644},"  id",[638,5024,4388],{"class":4306},[638,5026,4500],{"class":4306},[638,5028,4503],{"class":4319},[638,5030,4506],{"class":4326},[638,5032,4509],{"class":4306},[638,5034,4512],{"class":4326},[638,5036,4509],{"class":4306},[638,5038,1419],{"class":4326},[638,5040,4455],{"class":4306},[638,5042,5044],{"class":5043},"sytrG","   \u002F\u002F read back as `active.id`\n",[638,5046,5047,5050,5052,5055,5057],{"class":640,"line":4478},[638,5048,5049],{"class":4299},"  type",[638,5051,4388],{"class":4306},[638,5053,5054],{"class":647}," 'task'",[638,5056,4455],{"class":4306},[638,5058,5059],{"class":5043},"              \u002F\u002F matched by the targets' `accept`\n",[638,5061,5062,5065,5067,5069],{"class":640,"line":4492},[638,5063,5064],{"class":4299},"  handle",[638,5066,4388],{"class":4306},[638,5068,4486],{"class":647},[638,5070,4489],{"class":4306},[638,5072,5073,5075,5077,5079,5081,5083,5085,5087],{"class":640,"line":4517},[638,5074,4495],{"class":644},[638,5076,4388],{"class":4306},[638,5078,4500],{"class":4306},[638,5080,4503],{"class":4319},[638,5082,4506],{"class":4326},[638,5084,4509],{"class":4306},[638,5086,4512],{"class":4326},[638,5088,4489],{"class":4306},[638,5090,5091],{"class":640,"line":4523},[638,5092,4520],{"class":4306},[638,5094,5095],{"class":640,"line":4529},[638,5096,4526],{"class":4295},[638,5098,5099],{"class":640,"line":4534},[638,5100,4365],{"emptyLinePlaceholder":4364},[638,5102,5103],{"class":640,"line":4540},[638,5104,4537],{"class":4295},[638,5106,5107,5109,5111,5113,5115,5117,5119,5121],{"class":640,"line":4572},[638,5108,4543],{"class":4295},[638,5110,4546],{"class":4299},[638,5112,4307],{"class":4306},[638,5114,4551],{"class":647},[638,5116,4562],{"class":4299},[638,5118,4307],{"class":4306},[638,5120,4567],{"class":647},[638,5122,4313],{"class":4295},[638,5124,5125,5128,5131,5133,5136,5138,5140,5142,5145,5147,5150,5152,5154],{"class":640,"line":4595},[638,5126,5127],{"class":4295},"    \u003Cbutton",[638,5129,5130],{"class":4299}," type",[638,5132,4307],{"class":4306},[638,5134,5135],{"class":647},"\"button\"",[638,5137,4578],{"class":4299},[638,5139,4307],{"class":4306},[638,5141,4583],{"class":647},[638,5143,5144],{"class":4299}," :aria-label",[638,5146,4307],{"class":4306},[638,5148,5149],{"class":647},"\"`Move ${card.title}`\"",[638,5151,4586],{"class":4295},[638,5153,4589],{"class":4326},[638,5155,5156],{"class":4295},"\u003C\u002Fbutton>\n",[638,5158,5159],{"class":640,"line":4601},[638,5160,4598],{"class":4326},[638,5162,5163],{"class":640,"line":4607},[638,5164,4604],{"class":4295},[638,5166,5168],{"class":640,"line":5167},21,[638,5169,4610],{"class":4295},[628,5171,5173],{"className":4285,"code":5172,"filename":4614,"language":4288,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeDroppable } from '@vue-dnd-kit\u002Fcore';\n\nconst emit = defineEmits\u003C{ drop: [cards: Card[]] }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\nconst { isOver, isAccepting } = makeDroppable(el, {\n  accept: 'task',\n  onDrop: (e) => emit('drop', e.active.items.map((item) => item.data as Card)),\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"el\" :class=\"{ over: isOver && isAccepting }\">\u003Cslot \u002F>\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[501,5174,5175,5189,5205,5221,5225,5253,5273,5277,5305,5316,5373,5377,5381,5385,5389,5412],{"__ignoreMap":634},[638,5176,5177,5179,5181,5183,5185,5187],{"class":640,"line":641},[638,5178,4296],{"class":4295},[638,5180,4300],{"class":4299},[638,5182,4303],{"class":4299},[638,5184,4307],{"class":4306},[638,5186,4310],{"class":647},[638,5188,4313],{"class":4295},[638,5190,5191,5193,5195,5197,5199,5201,5203],{"class":640,"line":4316},[638,5192,4320],{"class":4319},[638,5194,4323],{"class":4306},[638,5196,4327],{"class":4326},[638,5198,4330],{"class":4306},[638,5200,4333],{"class":4319},[638,5202,4336],{"class":647},[638,5204,4339],{"class":4306},[638,5206,5207,5209,5211,5213,5215,5217,5219],{"class":640,"line":4342},[638,5208,4320],{"class":4319},[638,5210,4323],{"class":4306},[638,5212,4655],{"class":4326},[638,5214,4330],{"class":4306},[638,5216,4333],{"class":4319},[638,5218,4356],{"class":647},[638,5220,4339],{"class":4306},[638,5222,5223],{"class":640,"line":4361},[638,5224,4365],{"emptyLinePlaceholder":4364},[638,5226,5227,5229,5231,5233,5235,5237,5239,5241,5243,5245,5247,5249,5251],{"class":640,"line":4368},[638,5228,4371],{"class":4319},[638,5230,4674],{"class":4326},[638,5232,4307],{"class":4306},[638,5234,4679],{"class":644},[638,5236,4382],{"class":4306},[638,5238,4684],{"class":4326},[638,5240,4388],{"class":4306},[638,5242,4469],{"class":4306},[638,5244,4691],{"class":4326},[638,5246,4388],{"class":4306},[638,5248,4392],{"class":4391},[638,5250,4698],{"class":4306},[638,5252,4395],{"class":4306},[638,5254,5255,5257,5259,5261,5263,5265,5267,5269,5271],{"class":640,"line":4398},[638,5256,4371],{"class":4319},[638,5258,4403],{"class":4326},[638,5260,4307],{"class":4306},[638,5262,4408],{"class":644},[638,5264,4411],{"class":4306},[638,5266,4414],{"class":4391},[638,5268,4417],{"class":4306},[638,5270,4420],{"class":647},[638,5272,4423],{"class":4306},[638,5274,5275],{"class":640,"line":4426},[638,5276,4365],{"emptyLinePlaceholder":4364},[638,5278,5279,5281,5283,5286,5288,5291,5293,5295,5297,5299,5301,5303],{"class":640,"line":4431},[638,5280,4371],{"class":4319},[638,5282,4323],{"class":4306},[638,5284,5285],{"class":4326}," isOver",[638,5287,4455],{"class":4306},[638,5289,5290],{"class":4326}," isAccepting ",[638,5292,4330],{"class":4306},[638,5294,4443],{"class":4306},[638,5296,4745],{"class":644},[638,5298,4449],{"class":4306},[638,5300,4452],{"class":4326},[638,5302,4455],{"class":4306},[638,5304,4458],{"class":4306},[638,5306,5307,5310,5312,5314],{"class":640,"line":4461},[638,5308,5309],{"class":4299},"  accept",[638,5311,4388],{"class":4306},[638,5313,5054],{"class":647},[638,5315,4489],{"class":4306},[638,5317,5318,5321,5323,5325,5327,5329,5331,5333,5335,5337,5339,5341,5343,5345,5347,5349,5351,5353,5355,5357,5359,5361,5363,5365,5367,5369,5371],{"class":640,"line":4478},[638,5319,5320],{"class":644},"  onDrop",[638,5322,4388],{"class":4306},[638,5324,4784],{"class":4306},[638,5326,4787],{"class":4299},[638,5328,4790],{"class":4306},[638,5330,4503],{"class":4319},[638,5332,4795],{"class":644},[638,5334,4449],{"class":4306},[638,5336,4800],{"class":647},[638,5338,4455],{"class":4306},[638,5340,4805],{"class":644},[638,5342,4509],{"class":4306},[638,5344,1129],{"class":644},[638,5346,4509],{"class":4306},[638,5348,1126],{"class":644},[638,5350,4509],{"class":4306},[638,5352,4815],{"class":644},[638,5354,4818],{"class":4306},[638,5356,4821],{"class":4299},[638,5358,4790],{"class":4306},[638,5360,4503],{"class":4319},[638,5362,4828],{"class":4326},[638,5364,4509],{"class":4306},[638,5366,4833],{"class":4326},[638,5368,4836],{"class":4319},[638,5370,4392],{"class":4391},[638,5372,4841],{"class":4306},[638,5374,5375],{"class":640,"line":4492},[638,5376,4520],{"class":4306},[638,5378,5379],{"class":640,"line":4517},[638,5380,4526],{"class":4295},[638,5382,5383],{"class":640,"line":4523},[638,5384,4365],{"emptyLinePlaceholder":4364},[638,5386,5387],{"class":640,"line":4529},[638,5388,4537],{"class":4295},[638,5390,5391,5393,5395,5397,5399,5401,5403,5406,5408,5410],{"class":640,"line":4534},[638,5392,4543],{"class":4295},[638,5394,4546],{"class":4299},[638,5396,4307],{"class":4306},[638,5398,4551],{"class":647},[638,5400,4562],{"class":4299},[638,5402,4307],{"class":4306},[638,5404,5405],{"class":647},"\"{ over: isOver && isAccepting }\"",[638,5407,4882],{"class":4295},[638,5409,4885],{"class":4326},[638,5411,4888],{"class":4295},[638,5413,5414],{"class":640,"line":4540},[638,5415,4610],{"class":4295},[490,5417,5418,5433,5447],{},[493,5419,5420,5421,1021,5423,1021,5425,5428,5429,5432],{},"カードは ",[501,5422,846],{},[501,5424,3499],{},[501,5426,5427],{},"aria-*"," 属性を自動で受け取ります。",[501,5430,5431],{},"\u003Cbutton>"," のハンドルはフォーカスでき、キーボードドラッグはそこから始まります。",[493,5434,5435,5437,5438,5440,5441,5443,5444,5446],{},[501,5436,574],{}," は、ドラッグ可能な要素では ",[501,5439,1430],{}," に、ターゲットでは ",[501,5442,1681],{}," になりました。コールバックは ",[501,5445,2021],{}," オブジェクトから外に出ました。",[493,5448,5449,4013,5451,5453],{},[501,5450,1904],{},[501,5452,2102],{}," は、そのドラッグを拒否するターゲットです：そこにドロップすると元の位置に戻ります。",[873,5455,320],{"id":5456},"a-sortable-list",[481,5458,5459],{},[496,5460,710],{},[628,5462,5465],{"className":4285,"code":5463,"filename":5464,"language":4288,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeDroppable, type IDragEvent } from '@vue-dnd-kit\u002Fcore';\nimport TaskItem from '.\u002FTaskItem.vue';\n\nconst tasks = defineModel\u003CTask[]>({ required: true });\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\nmakeDroppable(\n  el,\n  {\n    events: {\n      onDrop(e: IDragEvent) {\n        const r = e.helpers.suggestSort('vertical');\n        if (r) tasks.value = r.targetItems as Task[];\n      },\n    },\n  },\n  () => tasks.value,\n);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"el\">\n    \u003CTransitionGroup name=\"list\">\n      \u003CTaskItem v-for=\"(task, index) in tasks\" :key=\"task.id\" :task=\"task\" :index=\"index\" :tasks=\"tasks\" \u002F>\n    \u003C\u002FTransitionGroup>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","TaskList.vue",[501,5466,5467,5481,5497,5520,5535,5539,5571,5591,5595,5602,5609,5614,5623,5641,5670,5708,5713,5718,5722,5738,5742,5746,5751,5756,5769,5785,5877,5883,5888],{"__ignoreMap":634},[638,5468,5469,5471,5473,5475,5477,5479],{"class":640,"line":641},[638,5470,4296],{"class":4295},[638,5472,4300],{"class":4299},[638,5474,4303],{"class":4299},[638,5476,4307],{"class":4306},[638,5478,4310],{"class":647},[638,5480,4313],{"class":4295},[638,5482,5483,5485,5487,5489,5491,5493,5495],{"class":640,"line":4316},[638,5484,4320],{"class":4319},[638,5486,4323],{"class":4306},[638,5488,4327],{"class":4326},[638,5490,4330],{"class":4306},[638,5492,4333],{"class":4319},[638,5494,4336],{"class":647},[638,5496,4339],{"class":4306},[638,5498,5499,5501,5503,5505,5507,5509,5512,5514,5516,5518],{"class":640,"line":4342},[638,5500,4320],{"class":4319},[638,5502,4323],{"class":4306},[638,5504,4745],{"class":4326},[638,5506,4455],{"class":4306},[638,5508,5130],{"class":4319},[638,5510,5511],{"class":4326}," IDragEvent ",[638,5513,4330],{"class":4306},[638,5515,4333],{"class":4319},[638,5517,4356],{"class":647},[638,5519,4339],{"class":4306},[638,5521,5522,5524,5527,5530,5533],{"class":640,"line":4361},[638,5523,4320],{"class":4319},[638,5525,5526],{"class":4326}," TaskItem ",[638,5528,5529],{"class":4319},"from",[638,5531,5532],{"class":647}," '.\u002FTaskItem.vue'",[638,5534,4339],{"class":4306},[638,5536,5537],{"class":640,"line":4368},[638,5538,4365],{"emptyLinePlaceholder":4364},[638,5540,5541,5543,5546,5548,5551,5553,5556,5559,5562,5564,5568],{"class":640,"line":4398},[638,5542,4371],{"class":4319},[638,5544,5545],{"class":4326}," tasks ",[638,5547,4307],{"class":4306},[638,5549,5550],{"class":644}," defineModel",[638,5552,4411],{"class":4306},[638,5554,5555],{"class":4391},"Task",[638,5557,5558],{"class":4306},"[]>({",[638,5560,5561],{"class":4299}," required",[638,5563,4388],{"class":4306},[638,5565,5567],{"class":5566},"s3IRZ"," true",[638,5569,5570],{"class":4306}," });\n",[638,5572,5573,5575,5577,5579,5581,5583,5585,5587,5589],{"class":640,"line":4426},[638,5574,4371],{"class":4319},[638,5576,4403],{"class":4326},[638,5578,4307],{"class":4306},[638,5580,4408],{"class":644},[638,5582,4411],{"class":4306},[638,5584,4414],{"class":4391},[638,5586,4417],{"class":4306},[638,5588,4420],{"class":647},[638,5590,4423],{"class":4306},[638,5592,5593],{"class":640,"line":4431},[638,5594,4365],{"emptyLinePlaceholder":4364},[638,5596,5597,5599],{"class":640,"line":4461},[638,5598,138],{"class":644},[638,5600,5601],{"class":4306},"(\n",[638,5603,5604,5607],{"class":640,"line":4478},[638,5605,5606],{"class":4326},"  el",[638,5608,4489],{"class":4306},[638,5610,5611],{"class":640,"line":4492},[638,5612,5613],{"class":4306},"  {\n",[638,5615,5616,5619,5621],{"class":640,"line":4517},[638,5617,5618],{"class":4299},"    events",[638,5620,4388],{"class":4306},[638,5622,4458],{"class":4306},[638,5624,5625,5628,5630,5632,5634,5637,5639],{"class":640,"line":4523},[638,5626,5627],{"class":644},"      onDrop",[638,5629,4449],{"class":4306},[638,5631,4787],{"class":4299},[638,5633,4388],{"class":4306},[638,5635,5636],{"class":4391}," IDragEvent",[638,5638,4790],{"class":4306},[638,5640,4458],{"class":4306},[638,5642,5643,5646,5649,5651,5653,5655,5658,5660,5663,5665,5668],{"class":640,"line":4529},[638,5644,5645],{"class":4319},"        const",[638,5647,5648],{"class":4326}," r ",[638,5650,4307],{"class":4306},[638,5652,4805],{"class":644},[638,5654,4509],{"class":4306},[638,5656,5657],{"class":644},"helpers",[638,5659,4509],{"class":4306},[638,5661,5662],{"class":644},"suggestSort",[638,5664,4449],{"class":4306},[638,5666,5667],{"class":647},"'vertical'",[638,5669,4423],{"class":4306},[638,5671,5672,5675,5677,5680,5682,5685,5687,5690,5692,5695,5697,5700,5702,5705],{"class":640,"line":4534},[638,5673,5674],{"class":4319},"        if",[638,5676,4784],{"class":4306},[638,5678,5679],{"class":4326},"r",[638,5681,4790],{"class":4306},[638,5683,5684],{"class":4326}," tasks",[638,5686,4509],{"class":4306},[638,5688,5689],{"class":4326},"value ",[638,5691,4307],{"class":4306},[638,5693,5694],{"class":4326}," r",[638,5696,4509],{"class":4306},[638,5698,5699],{"class":4326},"targetItems ",[638,5701,4836],{"class":4319},[638,5703,5704],{"class":4391}," Task",[638,5706,5707],{"class":4306},"[];\n",[638,5709,5710],{"class":640,"line":4540},[638,5711,5712],{"class":4306},"      },\n",[638,5714,5715],{"class":640,"line":4572},[638,5716,5717],{"class":4306},"    },\n",[638,5719,5720],{"class":640,"line":4595},[638,5721,4846],{"class":4306},[638,5723,5724,5727,5729,5731,5733,5736],{"class":640,"line":4601},[638,5725,5726],{"class":4306},"  ()",[638,5728,4503],{"class":4319},[638,5730,5684],{"class":4326},[638,5732,4509],{"class":4306},[638,5734,5735],{"class":4326},"value",[638,5737,4489],{"class":4306},[638,5739,5740],{"class":640,"line":4607},[638,5741,4423],{"class":4306},[638,5743,5744],{"class":640,"line":5167},[638,5745,4526],{"class":4295},[638,5747,5749],{"class":640,"line":5748},22,[638,5750,4365],{"emptyLinePlaceholder":4364},[638,5752,5754],{"class":640,"line":5753},23,[638,5755,4537],{"class":4295},[638,5757,5759,5761,5763,5765,5767],{"class":640,"line":5758},24,[638,5760,4543],{"class":4295},[638,5762,4546],{"class":4299},[638,5764,4307],{"class":4306},[638,5766,4551],{"class":647},[638,5768,4313],{"class":4295},[638,5770,5772,5775,5778,5780,5783],{"class":640,"line":5771},25,[638,5773,5774],{"class":4295},"    \u003CTransitionGroup",[638,5776,5777],{"class":4299}," name",[638,5779,4307],{"class":4306},[638,5781,5782],{"class":647},"\"list\"",[638,5784,4313],{"class":4295},[638,5786,5788,5791,5794,5796,5799,5801,5804,5806,5809,5811,5814,5816,5818,5821,5824,5826,5828,5830,5832,5834,5836,5838,5840,5842,5844,5846,5848,5850,5853,5855,5857,5859,5861,5863,5866,5868,5870,5872,5874],{"class":640,"line":5787},26,[638,5789,5790],{"class":4295},"      \u003CTaskItem",[638,5792,5793],{"class":4319}," v-for",[638,5795,4307],{"class":4306},[638,5797,5798],{"class":647},"\"",[638,5800,4449],{"class":4306},[638,5802,5803],{"class":4326},"task",[638,5805,4455],{"class":4306},[638,5807,5808],{"class":4326}," index",[638,5810,4790],{"class":4306},[638,5812,5813],{"class":4306}," in",[638,5815,5684],{"class":4326},[638,5817,5798],{"class":647},[638,5819,5820],{"class":4306}," :",[638,5822,5823],{"class":4299},"key",[638,5825,4307],{"class":4306},[638,5827,5798],{"class":647},[638,5829,5803],{"class":4326},[638,5831,4509],{"class":4306},[638,5833,1419],{"class":4326},[638,5835,5798],{"class":647},[638,5837,5820],{"class":4306},[638,5839,5803],{"class":4299},[638,5841,4307],{"class":4306},[638,5843,5798],{"class":647},[638,5845,5803],{"class":4326},[638,5847,5798],{"class":647},[638,5849,5820],{"class":4306},[638,5851,5852],{"class":4299},"index",[638,5854,4307],{"class":4306},[638,5856,5798],{"class":647},[638,5858,5852],{"class":4326},[638,5860,5798],{"class":647},[638,5862,5820],{"class":4306},[638,5864,5865],{"class":4299},"tasks",[638,5867,4307],{"class":4306},[638,5869,5798],{"class":647},[638,5871,5865],{"class":4326},[638,5873,5798],{"class":647},[638,5875,5876],{"class":4295}," \u002F>\n",[638,5878,5880],{"class":640,"line":5879},27,[638,5881,5882],{"class":4295},"    \u003C\u002FTransitionGroup>\n",[638,5884,5886],{"class":640,"line":5885},28,[638,5887,4604],{"class":4295},[638,5889,5891],{"class":640,"line":5890},29,[638,5892,4610],{"class":4295},[628,5894,5897],{"className":4285,"code":5895,"filename":5896,"language":4288,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeDraggable } from '@vue-dnd-kit\u002Fcore';\n\nconst props = defineProps\u003C{ task: Task; index: number; tasks: Task[] }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\nconst { isDragging } = makeDraggable(el, { id: props.task.id }, () => [props.index, props.tasks]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"el\" :class=\"{ 'is-dragging': isDragging }\">{{ task.title }}\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","TaskItem.vue",[501,5898,5899,5913,5929,5945,5949,5991,6011,6015,6080,6084,6088,6092,6117],{"__ignoreMap":634},[638,5900,5901,5903,5905,5907,5909,5911],{"class":640,"line":641},[638,5902,4296],{"class":4295},[638,5904,4300],{"class":4299},[638,5906,4303],{"class":4299},[638,5908,4307],{"class":4306},[638,5910,4310],{"class":647},[638,5912,4313],{"class":4295},[638,5914,5915,5917,5919,5921,5923,5925,5927],{"class":640,"line":4316},[638,5916,4320],{"class":4319},[638,5918,4323],{"class":4306},[638,5920,4327],{"class":4326},[638,5922,4330],{"class":4306},[638,5924,4333],{"class":4319},[638,5926,4336],{"class":647},[638,5928,4339],{"class":4306},[638,5930,5931,5933,5935,5937,5939,5941,5943],{"class":640,"line":4342},[638,5932,4320],{"class":4319},[638,5934,4323],{"class":4306},[638,5936,4349],{"class":4326},[638,5938,4330],{"class":4306},[638,5940,4333],{"class":4319},[638,5942,4356],{"class":647},[638,5944,4339],{"class":4306},[638,5946,5947],{"class":640,"line":4361},[638,5948,4365],{"emptyLinePlaceholder":4364},[638,5950,5951,5953,5955,5957,5959,5961,5964,5966,5968,5971,5973,5975,5978,5980,5982,5984,5986,5989],{"class":640,"line":4368},[638,5952,4371],{"class":4319},[638,5954,4374],{"class":4326},[638,5956,4307],{"class":4306},[638,5958,4379],{"class":644},[638,5960,4382],{"class":4306},[638,5962,5963],{"class":4326}," task",[638,5965,4388],{"class":4306},[638,5967,5704],{"class":4391},[638,5969,5970],{"class":4306},";",[638,5972,5808],{"class":4326},[638,5974,4388],{"class":4306},[638,5976,5977],{"class":4391}," number",[638,5979,5970],{"class":4306},[638,5981,5684],{"class":4326},[638,5983,4388],{"class":4306},[638,5985,5704],{"class":4391},[638,5987,5988],{"class":4306},"[]",[638,5990,4395],{"class":4306},[638,5992,5993,5995,5997,5999,6001,6003,6005,6007,6009],{"class":640,"line":4398},[638,5994,4371],{"class":4319},[638,5996,4403],{"class":4326},[638,5998,4307],{"class":4306},[638,6000,4408],{"class":644},[638,6002,4411],{"class":4306},[638,6004,4414],{"class":4391},[638,6006,4417],{"class":4306},[638,6008,4420],{"class":647},[638,6010,4423],{"class":4306},[638,6012,6013],{"class":640,"line":4426},[638,6014,4365],{"emptyLinePlaceholder":4364},[638,6016,6017,6019,6021,6023,6025,6027,6029,6031,6033,6035,6037,6040,6042,6044,6046,6048,6050,6053,6056,6058,6060,6062,6065,6067,6069,6071,6073,6075,6077],{"class":640,"line":4431},[638,6018,4371],{"class":4319},[638,6020,4323],{"class":4306},[638,6022,4438],{"class":4326},[638,6024,4330],{"class":4306},[638,6026,4443],{"class":4306},[638,6028,4446],{"class":644},[638,6030,4449],{"class":4306},[638,6032,4452],{"class":4326},[638,6034,4455],{"class":4306},[638,6036,4323],{"class":4306},[638,6038,6039],{"class":4299}," id",[638,6041,4388],{"class":4306},[638,6043,4506],{"class":4326},[638,6045,4509],{"class":4306},[638,6047,5803],{"class":4326},[638,6049,4509],{"class":4306},[638,6051,6052],{"class":4326},"id ",[638,6054,6055],{"class":4306},"},",[638,6057,4500],{"class":4306},[638,6059,4503],{"class":4319},[638,6061,4469],{"class":4306},[638,6063,6064],{"class":4326},"props",[638,6066,4509],{"class":4306},[638,6068,5852],{"class":4326},[638,6070,4455],{"class":4306},[638,6072,4506],{"class":4326},[638,6074,4509],{"class":4306},[638,6076,5865],{"class":4326},[638,6078,6079],{"class":4306},"]);\n",[638,6081,6082],{"class":640,"line":4461},[638,6083,4526],{"class":4295},[638,6085,6086],{"class":640,"line":4478},[638,6087,4365],{"emptyLinePlaceholder":4364},[638,6089,6090],{"class":640,"line":4492},[638,6091,4537],{"class":4295},[638,6093,6094,6096,6098,6100,6102,6104,6106,6109,6111,6114],{"class":640,"line":4517},[638,6095,4543],{"class":4295},[638,6097,4546],{"class":4299},[638,6099,4307],{"class":4306},[638,6101,4551],{"class":647},[638,6103,4562],{"class":4299},[638,6105,4307],{"class":4306},[638,6107,6108],{"class":647},"\"{ 'is-dragging': isDragging }\"",[638,6110,4586],{"class":4295},[638,6112,6113],{"class":4326},"{{ task.title }}",[638,6115,6116],{"class":4295},"\u003C\u002Fdiv>\n",[638,6118,6119],{"class":640,"line":4523},[638,6120,4610],{"class":4295},[481,6122,6123],{},[496,6124,713],{},[628,6126,6128],{"className":4285,"code":6127,"filename":5464,"language":4288,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeSortableList } from '@vue-dnd-kit\u002Fcore';\nimport TaskItem from '.\u002FTaskItem.vue';\n\nconst tasks = defineModel\u003CTask[]>({ required: true });\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\nconst { items } = makeSortableList(el, { items: tasks });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cul ref=\"el\">\n    \u003CTaskItem v-for=\"task in items\" :key=\"task.id\" :task=\"task\" \u002F>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n",[501,6129,6130,6144,6160,6177,6189,6193,6217,6237,6241,6274,6278,6282,6286,6299,6350,6355],{"__ignoreMap":634},[638,6131,6132,6134,6136,6138,6140,6142],{"class":640,"line":641},[638,6133,4296],{"class":4295},[638,6135,4300],{"class":4299},[638,6137,4303],{"class":4299},[638,6139,4307],{"class":4306},[638,6141,4310],{"class":647},[638,6143,4313],{"class":4295},[638,6145,6146,6148,6150,6152,6154,6156,6158],{"class":640,"line":4316},[638,6147,4320],{"class":4319},[638,6149,4323],{"class":4306},[638,6151,4327],{"class":4326},[638,6153,4330],{"class":4306},[638,6155,4333],{"class":4319},[638,6157,4336],{"class":647},[638,6159,4339],{"class":4306},[638,6161,6162,6164,6166,6169,6171,6173,6175],{"class":640,"line":4342},[638,6163,4320],{"class":4319},[638,6165,4323],{"class":4306},[638,6167,6168],{"class":4326}," makeSortableList ",[638,6170,4330],{"class":4306},[638,6172,4333],{"class":4319},[638,6174,4356],{"class":647},[638,6176,4339],{"class":4306},[638,6178,6179,6181,6183,6185,6187],{"class":640,"line":4361},[638,6180,4320],{"class":4319},[638,6182,5526],{"class":4326},[638,6184,5529],{"class":4319},[638,6186,5532],{"class":647},[638,6188,4339],{"class":4306},[638,6190,6191],{"class":640,"line":4368},[638,6192,4365],{"emptyLinePlaceholder":4364},[638,6194,6195,6197,6199,6201,6203,6205,6207,6209,6211,6213,6215],{"class":640,"line":4398},[638,6196,4371],{"class":4319},[638,6198,5545],{"class":4326},[638,6200,4307],{"class":4306},[638,6202,5550],{"class":644},[638,6204,4411],{"class":4306},[638,6206,5555],{"class":4391},[638,6208,5558],{"class":4306},[638,6210,5561],{"class":4299},[638,6212,4388],{"class":4306},[638,6214,5567],{"class":5566},[638,6216,5570],{"class":4306},[638,6218,6219,6221,6223,6225,6227,6229,6231,6233,6235],{"class":640,"line":4426},[638,6220,4371],{"class":4319},[638,6222,4403],{"class":4326},[638,6224,4307],{"class":4306},[638,6226,4408],{"class":644},[638,6228,4411],{"class":4306},[638,6230,4414],{"class":4391},[638,6232,4417],{"class":4306},[638,6234,4420],{"class":647},[638,6236,4423],{"class":4306},[638,6238,6239],{"class":640,"line":4431},[638,6240,4365],{"emptyLinePlaceholder":4364},[638,6242,6243,6245,6247,6250,6252,6254,6257,6259,6261,6263,6265,6268,6270,6272],{"class":640,"line":4461},[638,6244,4371],{"class":4319},[638,6246,4323],{"class":4306},[638,6248,6249],{"class":4326}," items ",[638,6251,4330],{"class":4306},[638,6253,4443],{"class":4306},[638,6255,6256],{"class":644}," makeSortableList",[638,6258,4449],{"class":4306},[638,6260,4452],{"class":4326},[638,6262,4455],{"class":4306},[638,6264,4323],{"class":4306},[638,6266,6267],{"class":4299}," items",[638,6269,4388],{"class":4306},[638,6271,5545],{"class":4326},[638,6273,4520],{"class":4306},[638,6275,6276],{"class":640,"line":4478},[638,6277,4526],{"class":4295},[638,6279,6280],{"class":640,"line":4492},[638,6281,4365],{"emptyLinePlaceholder":4364},[638,6283,6284],{"class":640,"line":4517},[638,6285,4537],{"class":4295},[638,6287,6288,6291,6293,6295,6297],{"class":640,"line":4523},[638,6289,6290],{"class":4295},"  \u003Cul",[638,6292,4546],{"class":4299},[638,6294,4307],{"class":4306},[638,6296,4551],{"class":647},[638,6298,4313],{"class":4295},[638,6300,6301,6304,6306,6308,6310,6313,6316,6318,6320,6322,6324,6326,6328,6330,6332,6334,6336,6338,6340,6342,6344,6346,6348],{"class":640,"line":4529},[638,6302,6303],{"class":4295},"    \u003CTaskItem",[638,6305,5793],{"class":4319},[638,6307,4307],{"class":4306},[638,6309,5798],{"class":647},[638,6311,6312],{"class":4326},"task ",[638,6314,6315],{"class":4306},"in",[638,6317,6267],{"class":4326},[638,6319,5798],{"class":647},[638,6321,5820],{"class":4306},[638,6323,5823],{"class":4299},[638,6325,4307],{"class":4306},[638,6327,5798],{"class":647},[638,6329,5803],{"class":4326},[638,6331,4509],{"class":4306},[638,6333,1419],{"class":4326},[638,6335,5798],{"class":647},[638,6337,5820],{"class":4306},[638,6339,5803],{"class":4299},[638,6341,4307],{"class":4306},[638,6343,5798],{"class":647},[638,6345,5803],{"class":4326},[638,6347,5798],{"class":647},[638,6349,5876],{"class":4295},[638,6351,6352],{"class":640,"line":4534},[638,6353,6354],{"class":4295},"  \u003C\u002Ful>\n",[638,6356,6357],{"class":640,"line":4540},[638,6358,4610],{"class":4295},[628,6360,6362],{"className":4285,"code":6361,"filename":5896,"language":4288,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeSortableItem } from '@vue-dnd-kit\u002Fcore';\n\nconst props = defineProps\u003C{ task: Task }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\nconst { isPlaceholder } = makeSortableItem(el, { item: () => props.task });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli ref=\"el\" :class=\"{ slot: isPlaceholder }\">{{ task.title }}\u003C\u002Fli>\n\u003C\u002Ftemplate>\n",[501,6363,6364,6378,6394,6411,6415,6435,6455,6459,6499,6503,6507,6511,6536],{"__ignoreMap":634},[638,6365,6366,6368,6370,6372,6374,6376],{"class":640,"line":641},[638,6367,4296],{"class":4295},[638,6369,4300],{"class":4299},[638,6371,4303],{"class":4299},[638,6373,4307],{"class":4306},[638,6375,4310],{"class":647},[638,6377,4313],{"class":4295},[638,6379,6380,6382,6384,6386,6388,6390,6392],{"class":640,"line":4316},[638,6381,4320],{"class":4319},[638,6383,4323],{"class":4306},[638,6385,4327],{"class":4326},[638,6387,4330],{"class":4306},[638,6389,4333],{"class":4319},[638,6391,4336],{"class":647},[638,6393,4339],{"class":4306},[638,6395,6396,6398,6400,6403,6405,6407,6409],{"class":640,"line":4342},[638,6397,4320],{"class":4319},[638,6399,4323],{"class":4306},[638,6401,6402],{"class":4326}," makeSortableItem ",[638,6404,4330],{"class":4306},[638,6406,4333],{"class":4319},[638,6408,4356],{"class":647},[638,6410,4339],{"class":4306},[638,6412,6413],{"class":640,"line":4361},[638,6414,4365],{"emptyLinePlaceholder":4364},[638,6416,6417,6419,6421,6423,6425,6427,6429,6431,6433],{"class":640,"line":4368},[638,6418,4371],{"class":4319},[638,6420,4374],{"class":4326},[638,6422,4307],{"class":4306},[638,6424,4379],{"class":644},[638,6426,4382],{"class":4306},[638,6428,5963],{"class":4326},[638,6430,4388],{"class":4306},[638,6432,5704],{"class":4391},[638,6434,4395],{"class":4306},[638,6436,6437,6439,6441,6443,6445,6447,6449,6451,6453],{"class":640,"line":4398},[638,6438,4371],{"class":4319},[638,6440,4403],{"class":4326},[638,6442,4307],{"class":4306},[638,6444,4408],{"class":644},[638,6446,4411],{"class":4306},[638,6448,4414],{"class":4391},[638,6450,4417],{"class":4306},[638,6452,4420],{"class":647},[638,6454,4423],{"class":4306},[638,6456,6457],{"class":640,"line":4426},[638,6458,4365],{"emptyLinePlaceholder":4364},[638,6460,6461,6463,6465,6468,6470,6472,6475,6477,6479,6481,6483,6485,6487,6489,6491,6493,6495,6497],{"class":640,"line":4431},[638,6462,4371],{"class":4319},[638,6464,4323],{"class":4306},[638,6466,6467],{"class":4326}," isPlaceholder ",[638,6469,4330],{"class":4306},[638,6471,4443],{"class":4306},[638,6473,6474],{"class":644}," makeSortableItem",[638,6476,4449],{"class":4306},[638,6478,4452],{"class":4326},[638,6480,4455],{"class":4306},[638,6482,4323],{"class":4306},[638,6484,4828],{"class":644},[638,6486,4388],{"class":4306},[638,6488,4500],{"class":4306},[638,6490,4503],{"class":4319},[638,6492,4506],{"class":4326},[638,6494,4509],{"class":4306},[638,6496,6312],{"class":4326},[638,6498,4520],{"class":4306},[638,6500,6501],{"class":640,"line":4461},[638,6502,4526],{"class":4295},[638,6504,6505],{"class":640,"line":4478},[638,6506,4365],{"emptyLinePlaceholder":4364},[638,6508,6509],{"class":640,"line":4492},[638,6510,4537],{"class":4295},[638,6512,6513,6516,6518,6520,6522,6524,6526,6529,6531,6533],{"class":640,"line":4517},[638,6514,6515],{"class":4295},"  \u003Cli",[638,6517,4546],{"class":4299},[638,6519,4307],{"class":4306},[638,6521,4551],{"class":647},[638,6523,4562],{"class":4299},[638,6525,4307],{"class":4306},[638,6527,6528],{"class":647},"\"{ slot: isPlaceholder }\"",[638,6530,4586],{"class":4295},[638,6532,6113],{"class":4326},[638,6534,6535],{"class":4295},"\u003C\u002Fli>\n",[638,6537,6538],{"class":640,"line":4523},[638,6539,4610],{"class":4295},[490,6541,6542,6558,6567],{},[493,6543,6544,6545,6547,6548,6550,6551,606,6554,6557],{},"ドラフトである ",[501,6546,1126],{}," を描画します：ドラッグ中に並べ替わります。ドロップすると ",[501,6549,5865],{}," が新しい順序を受け取り、",[501,6552,6553],{},"defineModel",[501,6555,6556],{},"update:modelValue"," を発行します。",[493,6559,6560,6561,6563,6564,6566],{},"インデックスも、ペイロードも、",[501,6562,507],{}," も、",[501,6565,531],{}," も要りません：行は自分でスライドします。",[493,6568,6569,6570,1819,6572,6575],{},"ドラッグ中の行は、着地する位置としてリストの中に残ります。隠すのではなく、",[501,6571,1884],{},[501,6573,6574],{},"[data-dnd-placeholder]"," でスタイルを付けてください。",[873,6577,324],{"id":6578},"lists-that-share-items",[481,6580,6581],{},[496,6582,710],{},[628,6584,6589],{"className":6585,"code":6586,"filename":6587,"language":6588,"meta":634,"style":634},"language-ts shiki shiki-themes dnd-light dnd-light dnd-dark","\u002F\u002F Each column's makeDroppable calls this from its onDrop, with its array as the payload.\nfunction applySort(e: IDragEvent) {\n  const r = e.helpers.suggestSort('vertical');\n  if (!r) return;\n\n  const src = e.draggedItems[0]?.items;\n  const tgt = e.hoveredDraggable?.items ?? e.dropZone?.items;\n\n  if (src === todo.value) todo.value = r.sourceItems as Task[];\n  else if (src === done.value) done.value = r.sourceItems as Task[];\n\n  if (!r.sameList) {\n    if (tgt === todo.value) todo.value = r.targetItems as Task[];\n    else if (tgt === done.value) done.value = r.targetItems as Task[];\n  }\n}\n","Board.vue","ts",[501,6590,6591,6596,6616,6641,6658,6662,6689,6727,6731,6773,6816,6820,6837,6877,6918,6923],{"__ignoreMap":634},[638,6592,6593],{"class":640,"line":641},[638,6594,6595],{"class":5043},"\u002F\u002F Each column's makeDroppable calls this from its onDrop, with its array as the payload.\n",[638,6597,6598,6601,6604,6606,6608,6610,6612,6614],{"class":640,"line":4316},[638,6599,6600],{"class":4319},"function",[638,6602,6603],{"class":644}," applySort",[638,6605,4449],{"class":4306},[638,6607,4787],{"class":4299},[638,6609,4388],{"class":4306},[638,6611,5636],{"class":4391},[638,6613,4790],{"class":4306},[638,6615,4458],{"class":4306},[638,6617,6618,6621,6623,6625,6627,6629,6631,6633,6635,6637,6639],{"class":640,"line":4342},[638,6619,6620],{"class":4319},"  const",[638,6622,5648],{"class":4326},[638,6624,4307],{"class":4306},[638,6626,4805],{"class":644},[638,6628,4509],{"class":4306},[638,6630,5657],{"class":644},[638,6632,4509],{"class":4306},[638,6634,5662],{"class":644},[638,6636,4449],{"class":4306},[638,6638,5667],{"class":647},[638,6640,4423],{"class":4306},[638,6642,6643,6646,6649,6651,6653,6656],{"class":640,"line":4361},[638,6644,6645],{"class":4319},"  if",[638,6647,6648],{"class":4306}," (!",[638,6650,5679],{"class":4326},[638,6652,4790],{"class":4306},[638,6654,6655],{"class":4319}," return",[638,6657,4339],{"class":4306},[638,6659,6660],{"class":640,"line":4368},[638,6661,4365],{"emptyLinePlaceholder":4364},[638,6663,6664,6666,6669,6671,6673,6675,6677,6680,6682,6685,6687],{"class":640,"line":4398},[638,6665,6620],{"class":4319},[638,6667,6668],{"class":4326}," src ",[638,6670,4307],{"class":4306},[638,6672,4805],{"class":4326},[638,6674,4509],{"class":4306},[638,6676,4810],{"class":4326},[638,6678,6679],{"class":4306},"[",[638,6681,1513],{"class":5566},[638,6683,6684],{"class":4306},"]?.",[638,6686,1126],{"class":4326},[638,6688,4339],{"class":4306},[638,6690,6691,6693,6696,6698,6700,6702,6705,6708,6711,6714,6716,6718,6721,6723,6725],{"class":640,"line":4426},[638,6692,6620],{"class":4319},[638,6694,6695],{"class":4326}," tgt ",[638,6697,4307],{"class":4306},[638,6699,4805],{"class":4326},[638,6701,4509],{"class":4306},[638,6703,6704],{"class":4326},"hoveredDraggable",[638,6706,6707],{"class":4306},"?.",[638,6709,6710],{"class":4326},"items ",[638,6712,6713],{"class":4306},"??",[638,6715,4805],{"class":4326},[638,6717,4509],{"class":4306},[638,6719,6720],{"class":4326},"dropZone",[638,6722,6707],{"class":4306},[638,6724,1126],{"class":4326},[638,6726,4339],{"class":4306},[638,6728,6729],{"class":640,"line":4431},[638,6730,4365],{"emptyLinePlaceholder":4364},[638,6732,6733,6735,6737,6740,6743,6746,6748,6750,6752,6754,6756,6758,6760,6762,6764,6767,6769,6771],{"class":640,"line":4461},[638,6734,6645],{"class":4319},[638,6736,4784],{"class":4306},[638,6738,6739],{"class":4326},"src ",[638,6741,6742],{"class":4306},"===",[638,6744,6745],{"class":4326}," todo",[638,6747,4509],{"class":4306},[638,6749,5735],{"class":4326},[638,6751,4790],{"class":4306},[638,6753,6745],{"class":4326},[638,6755,4509],{"class":4306},[638,6757,5689],{"class":4326},[638,6759,4307],{"class":4306},[638,6761,5694],{"class":4326},[638,6763,4509],{"class":4306},[638,6765,6766],{"class":4326},"sourceItems ",[638,6768,4836],{"class":4319},[638,6770,5704],{"class":4391},[638,6772,5707],{"class":4306},[638,6774,6775,6778,6781,6783,6785,6787,6790,6792,6794,6796,6798,6800,6802,6804,6806,6808,6810,6812,6814],{"class":640,"line":4478},[638,6776,6777],{"class":4319},"  else",[638,6779,6780],{"class":4319}," if",[638,6782,4784],{"class":4306},[638,6784,6739],{"class":4326},[638,6786,6742],{"class":4306},[638,6788,6789],{"class":4326}," done",[638,6791,4509],{"class":4306},[638,6793,5735],{"class":4326},[638,6795,4790],{"class":4306},[638,6797,6789],{"class":4326},[638,6799,4509],{"class":4306},[638,6801,5689],{"class":4326},[638,6803,4307],{"class":4306},[638,6805,5694],{"class":4326},[638,6807,4509],{"class":4306},[638,6809,6766],{"class":4326},[638,6811,4836],{"class":4319},[638,6813,5704],{"class":4391},[638,6815,5707],{"class":4306},[638,6817,6818],{"class":640,"line":4492},[638,6819,4365],{"emptyLinePlaceholder":4364},[638,6821,6822,6824,6826,6828,6830,6833,6835],{"class":640,"line":4517},[638,6823,6645],{"class":4319},[638,6825,6648],{"class":4306},[638,6827,5679],{"class":4326},[638,6829,4509],{"class":4306},[638,6831,6832],{"class":4326},"sameList",[638,6834,4790],{"class":4306},[638,6836,4458],{"class":4306},[638,6838,6839,6842,6844,6847,6849,6851,6853,6855,6857,6859,6861,6863,6865,6867,6869,6871,6873,6875],{"class":640,"line":4523},[638,6840,6841],{"class":4319},"    if",[638,6843,4784],{"class":4306},[638,6845,6846],{"class":4326},"tgt ",[638,6848,6742],{"class":4306},[638,6850,6745],{"class":4326},[638,6852,4509],{"class":4306},[638,6854,5735],{"class":4326},[638,6856,4790],{"class":4306},[638,6858,6745],{"class":4326},[638,6860,4509],{"class":4306},[638,6862,5689],{"class":4326},[638,6864,4307],{"class":4306},[638,6866,5694],{"class":4326},[638,6868,4509],{"class":4306},[638,6870,5699],{"class":4326},[638,6872,4836],{"class":4319},[638,6874,5704],{"class":4391},[638,6876,5707],{"class":4306},[638,6878,6879,6882,6884,6886,6888,6890,6892,6894,6896,6898,6900,6902,6904,6906,6908,6910,6912,6914,6916],{"class":640,"line":4529},[638,6880,6881],{"class":4319},"    else",[638,6883,6780],{"class":4319},[638,6885,4784],{"class":4306},[638,6887,6846],{"class":4326},[638,6889,6742],{"class":4306},[638,6891,6789],{"class":4326},[638,6893,4509],{"class":4306},[638,6895,5735],{"class":4326},[638,6897,4790],{"class":4306},[638,6899,6789],{"class":4326},[638,6901,4509],{"class":4306},[638,6903,5689],{"class":4326},[638,6905,4307],{"class":4306},[638,6907,5694],{"class":4326},[638,6909,4509],{"class":4306},[638,6911,5699],{"class":4326},[638,6913,4836],{"class":4319},[638,6915,5704],{"class":4391},[638,6917,5707],{"class":4306},[638,6919,6920],{"class":640,"line":4534},[638,6921,6922],{"class":4306},"  }\n",[638,6924,6925],{"class":640,"line":4540},[638,6926,6927],{"class":4306},"}\n",[481,6929,6930],{},[496,6931,713],{},[628,6933,6936],{"className":4285,"code":6934,"filename":6935,"language":4288,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { toRef, useTemplateRef } from 'vue';\nimport { makeSortableList } from '@vue-dnd-kit\u002Fcore';\nimport TaskItem from '.\u002FTaskItem.vue';\n\nconst props = defineProps\u003C{ column: { id: string; tasks: Task[] } }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\nconst { items } = makeSortableList(el, {\n  id: props.column.id,                   \u002F\u002F `from.list` and `to.list` in drop events\n  items: toRef(props.column, 'tasks'),   \u002F\u002F writable: the parent passes a reactive column\n  group: 'board',                        \u002F\u002F same name: tasks move between these lists\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cul ref=\"el\">\n    \u003CTaskItem v-for=\"task in items\" :key=\"task.id\" :task=\"task\" \u002F>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n","Column.vue",[501,6937,6938,6952,6973,6989,7001,7005,7046,7066,7070,7092,7114,7142,7157,7161,7165,7169,7173,7185,7233,7237],{"__ignoreMap":634},[638,6939,6940,6942,6944,6946,6948,6950],{"class":640,"line":641},[638,6941,4296],{"class":4295},[638,6943,4300],{"class":4299},[638,6945,4303],{"class":4299},[638,6947,4307],{"class":4306},[638,6949,4310],{"class":647},[638,6951,4313],{"class":4295},[638,6953,6954,6956,6958,6961,6963,6965,6967,6969,6971],{"class":640,"line":4316},[638,6955,4320],{"class":4319},[638,6957,4323],{"class":4306},[638,6959,6960],{"class":4326}," toRef",[638,6962,4455],{"class":4306},[638,6964,4327],{"class":4326},[638,6966,4330],{"class":4306},[638,6968,4333],{"class":4319},[638,6970,4336],{"class":647},[638,6972,4339],{"class":4306},[638,6974,6975,6977,6979,6981,6983,6985,6987],{"class":640,"line":4342},[638,6976,4320],{"class":4319},[638,6978,4323],{"class":4306},[638,6980,6168],{"class":4326},[638,6982,4330],{"class":4306},[638,6984,4333],{"class":4319},[638,6986,4356],{"class":647},[638,6988,4339],{"class":4306},[638,6990,6991,6993,6995,6997,6999],{"class":640,"line":4361},[638,6992,4320],{"class":4319},[638,6994,5526],{"class":4326},[638,6996,5529],{"class":4319},[638,6998,5532],{"class":647},[638,7000,4339],{"class":4306},[638,7002,7003],{"class":640,"line":4368},[638,7004,4365],{"emptyLinePlaceholder":4364},[638,7006,7007,7009,7011,7013,7015,7017,7020,7022,7024,7026,7028,7031,7033,7035,7037,7039,7041,7044],{"class":640,"line":4398},[638,7008,4371],{"class":4319},[638,7010,4374],{"class":4326},[638,7012,4307],{"class":4306},[638,7014,4379],{"class":644},[638,7016,4382],{"class":4306},[638,7018,7019],{"class":4326}," column",[638,7021,4388],{"class":4306},[638,7023,4323],{"class":4306},[638,7025,6039],{"class":4326},[638,7027,4388],{"class":4306},[638,7029,7030],{"class":4391}," string",[638,7032,5970],{"class":4306},[638,7034,5684],{"class":4326},[638,7036,4388],{"class":4306},[638,7038,5704],{"class":4391},[638,7040,5988],{"class":4306},[638,7042,7043],{"class":4306}," }",[638,7045,4395],{"class":4306},[638,7047,7048,7050,7052,7054,7056,7058,7060,7062,7064],{"class":640,"line":4426},[638,7049,4371],{"class":4319},[638,7051,4403],{"class":4326},[638,7053,4307],{"class":4306},[638,7055,4408],{"class":644},[638,7057,4411],{"class":4306},[638,7059,4414],{"class":4391},[638,7061,4417],{"class":4306},[638,7063,4420],{"class":647},[638,7065,4423],{"class":4306},[638,7067,7068],{"class":640,"line":4431},[638,7069,4365],{"emptyLinePlaceholder":4364},[638,7071,7072,7074,7076,7078,7080,7082,7084,7086,7088,7090],{"class":640,"line":4461},[638,7073,4371],{"class":4319},[638,7075,4323],{"class":4306},[638,7077,6249],{"class":4326},[638,7079,4330],{"class":4306},[638,7081,4443],{"class":4306},[638,7083,6256],{"class":644},[638,7085,4449],{"class":4306},[638,7087,4452],{"class":4326},[638,7089,4455],{"class":4306},[638,7091,4458],{"class":4306},[638,7093,7094,7096,7098,7100,7102,7105,7107,7109,7111],{"class":640,"line":4478},[638,7095,5022],{"class":4299},[638,7097,4388],{"class":4306},[638,7099,4506],{"class":4326},[638,7101,4509],{"class":4306},[638,7103,7104],{"class":4326},"column",[638,7106,4509],{"class":4306},[638,7108,1419],{"class":4326},[638,7110,4455],{"class":4306},[638,7112,7113],{"class":5043},"                   \u002F\u002F `from.list` and `to.list` in drop events\n",[638,7115,7116,7119,7121,7123,7125,7127,7129,7131,7133,7136,7139],{"class":640,"line":4492},[638,7117,7118],{"class":4299},"  items",[638,7120,4388],{"class":4306},[638,7122,6960],{"class":644},[638,7124,4449],{"class":4306},[638,7126,6064],{"class":4326},[638,7128,4509],{"class":4306},[638,7130,7104],{"class":4326},[638,7132,4455],{"class":4306},[638,7134,7135],{"class":647}," 'tasks'",[638,7137,7138],{"class":4306},"),",[638,7140,7141],{"class":5043},"   \u002F\u002F writable: the parent passes a reactive column\n",[638,7143,7144,7147,7149,7152,7154],{"class":640,"line":4517},[638,7145,7146],{"class":4299},"  group",[638,7148,4388],{"class":4306},[638,7150,7151],{"class":647}," 'board'",[638,7153,4455],{"class":4306},[638,7155,7156],{"class":5043},"                        \u002F\u002F same name: tasks move between these lists\n",[638,7158,7159],{"class":640,"line":4523},[638,7160,4520],{"class":4306},[638,7162,7163],{"class":640,"line":4529},[638,7164,4526],{"class":4295},[638,7166,7167],{"class":640,"line":4534},[638,7168,4365],{"emptyLinePlaceholder":4364},[638,7170,7171],{"class":640,"line":4540},[638,7172,4537],{"class":4295},[638,7174,7175,7177,7179,7181,7183],{"class":640,"line":4572},[638,7176,6290],{"class":4295},[638,7178,4546],{"class":4299},[638,7180,4307],{"class":4306},[638,7182,4551],{"class":647},[638,7184,4313],{"class":4295},[638,7186,7187,7189,7191,7193,7195,7197,7199,7201,7203,7205,7207,7209,7211,7213,7215,7217,7219,7221,7223,7225,7227,7229,7231],{"class":640,"line":4595},[638,7188,6303],{"class":4295},[638,7190,5793],{"class":4319},[638,7192,4307],{"class":4306},[638,7194,5798],{"class":647},[638,7196,6312],{"class":4326},[638,7198,6315],{"class":4306},[638,7200,6267],{"class":4326},[638,7202,5798],{"class":647},[638,7204,5820],{"class":4306},[638,7206,5823],{"class":4299},[638,7208,4307],{"class":4306},[638,7210,5798],{"class":647},[638,7212,5803],{"class":4326},[638,7214,4509],{"class":4306},[638,7216,1419],{"class":4326},[638,7218,5798],{"class":647},[638,7220,5820],{"class":4306},[638,7222,5803],{"class":4299},[638,7224,4307],{"class":4306},[638,7226,5798],{"class":647},[638,7228,5803],{"class":4326},[638,7230,5798],{"class":647},[638,7232,5876],{"class":4295},[638,7234,7235],{"class":640,"line":4601},[638,7236,6354],{"class":4295},[638,7238,7239],{"class":640,"line":4607},[638,7240,4610],{"class":4295},[628,7242,7244],{"className":4285,"code":7243,"filename":6587,"language":4288,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { reactive } from 'vue';\nimport Column from '.\u002FColumn.vue';\n\nconst columns = reactive([\n  { id: 'todo', tasks: [{ id: 't1', title: 'Write the docs' }] },\n  { id: 'done', tasks: [] },\n]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CColumn v-for=\"column in columns\" :key=\"column.id\" :column=\"column\" \u002F>\n\u003C\u002Ftemplate>\n",[501,7245,7246,7260,7277,7291,7295,7310,7354,7376,7380,7384,7388,7392,7443],{"__ignoreMap":634},[638,7247,7248,7250,7252,7254,7256,7258],{"class":640,"line":641},[638,7249,4296],{"class":4295},[638,7251,4300],{"class":4299},[638,7253,4303],{"class":4299},[638,7255,4307],{"class":4306},[638,7257,4310],{"class":647},[638,7259,4313],{"class":4295},[638,7261,7262,7264,7266,7269,7271,7273,7275],{"class":640,"line":4316},[638,7263,4320],{"class":4319},[638,7265,4323],{"class":4306},[638,7267,7268],{"class":4326}," reactive ",[638,7270,4330],{"class":4306},[638,7272,4333],{"class":4319},[638,7274,4336],{"class":647},[638,7276,4339],{"class":4306},[638,7278,7279,7281,7284,7286,7289],{"class":640,"line":4342},[638,7280,4320],{"class":4319},[638,7282,7283],{"class":4326}," Column ",[638,7285,5529],{"class":4319},[638,7287,7288],{"class":647}," '.\u002FColumn.vue'",[638,7290,4339],{"class":4306},[638,7292,7293],{"class":640,"line":4361},[638,7294,4365],{"emptyLinePlaceholder":4364},[638,7296,7297,7299,7302,7304,7307],{"class":640,"line":4368},[638,7298,4371],{"class":4319},[638,7300,7301],{"class":4326}," columns ",[638,7303,4307],{"class":4306},[638,7305,7306],{"class":644}," reactive",[638,7308,7309],{"class":4306},"([\n",[638,7311,7312,7315,7317,7319,7322,7324,7326,7328,7331,7333,7335,7338,7340,7343,7345,7348,7351],{"class":640,"line":4398},[638,7313,7314],{"class":4306},"  {",[638,7316,6039],{"class":4299},[638,7318,4388],{"class":4306},[638,7320,7321],{"class":647}," 'todo'",[638,7323,4455],{"class":4306},[638,7325,5684],{"class":4299},[638,7327,4388],{"class":4306},[638,7329,7330],{"class":4306}," [{",[638,7332,6039],{"class":4299},[638,7334,4388],{"class":4306},[638,7336,7337],{"class":647}," 't1'",[638,7339,4455],{"class":4306},[638,7341,7342],{"class":4299}," title",[638,7344,4388],{"class":4306},[638,7346,7347],{"class":647}," 'Write the docs'",[638,7349,7350],{"class":4306}," }]",[638,7352,7353],{"class":4306}," },\n",[638,7355,7356,7358,7360,7362,7365,7367,7369,7371,7374],{"class":640,"line":4426},[638,7357,7314],{"class":4306},[638,7359,6039],{"class":4299},[638,7361,4388],{"class":4306},[638,7363,7364],{"class":647}," 'done'",[638,7366,4455],{"class":4306},[638,7368,5684],{"class":4299},[638,7370,4388],{"class":4306},[638,7372,7373],{"class":4306}," []",[638,7375,7353],{"class":4306},[638,7377,7378],{"class":640,"line":4431},[638,7379,6079],{"class":4306},[638,7381,7382],{"class":640,"line":4461},[638,7383,4526],{"class":4295},[638,7385,7386],{"class":640,"line":4478},[638,7387,4365],{"emptyLinePlaceholder":4364},[638,7389,7390],{"class":640,"line":4492},[638,7391,4537],{"class":4295},[638,7393,7394,7397,7399,7401,7403,7406,7408,7411,7413,7415,7417,7419,7421,7423,7425,7427,7429,7431,7433,7435,7437,7439,7441],{"class":640,"line":4517},[638,7395,7396],{"class":4295},"  \u003CColumn",[638,7398,5793],{"class":4319},[638,7400,4307],{"class":4306},[638,7402,5798],{"class":647},[638,7404,7405],{"class":4326},"column ",[638,7407,6315],{"class":4306},[638,7409,7410],{"class":4326}," columns",[638,7412,5798],{"class":647},[638,7414,5820],{"class":4306},[638,7416,5823],{"class":4299},[638,7418,4307],{"class":4306},[638,7420,5798],{"class":647},[638,7422,7104],{"class":4326},[638,7424,4509],{"class":4306},[638,7426,1419],{"class":4326},[638,7428,5798],{"class":647},[638,7430,5820],{"class":4306},[638,7432,7104],{"class":4299},[638,7434,4307],{"class":4306},[638,7436,5798],{"class":647},[638,7438,7104],{"class":4326},[638,7440,5798],{"class":647},[638,7442,5876],{"class":4295},[638,7444,7445],{"class":640,"line":4523},[638,7446,4610],{"class":4295},[481,7448,7449,7450,7452,7453,515,7455,7457],{},"ドロップは両方の配列に書き込みます：タスクが出ていった配列と、入った配列です。",[501,7451,5896],{}," は上の並べ替え可能なリストのものと同じです。コピーを配るパレットは ",[501,7454,2551],{},[501,7456,2554],{}," フラグで作っていましたが、今はリストです：",[628,7459,7462],{"className":6585,"code":7460,"filename":7461,"language":6588,"meta":634,"style":634},"makeSortableList(el, {\n  items: blocks,\n  group: { name: 'board', pull: 'clone', put: false },  \u002F\u002F copies go out, nothing comes in\n  sort: false,                                          \u002F\u002F its own order stays\n  clone: (block) => ({ ...block, id: crypto.randomUUID() }),\n});\n","Palette.vue",[501,7463,7464,7476,7487,7527,7541,7585],{"__ignoreMap":634},[638,7465,7466,7468,7470,7472,7474],{"class":640,"line":641},[638,7467,143],{"class":644},[638,7469,4449],{"class":4306},[638,7471,4452],{"class":4326},[638,7473,4455],{"class":4306},[638,7475,4458],{"class":4306},[638,7477,7478,7480,7482,7485],{"class":640,"line":4316},[638,7479,7118],{"class":4299},[638,7481,4388],{"class":4306},[638,7483,7484],{"class":4326}," blocks",[638,7486,4489],{"class":4306},[638,7488,7489,7491,7493,7495,7497,7499,7501,7503,7506,7508,7511,7513,7516,7518,7521,7524],{"class":640,"line":4342},[638,7490,7146],{"class":4299},[638,7492,4388],{"class":4306},[638,7494,4323],{"class":4306},[638,7496,5777],{"class":4299},[638,7498,4388],{"class":4306},[638,7500,7151],{"class":647},[638,7502,4455],{"class":4306},[638,7504,7505],{"class":4299}," pull",[638,7507,4388],{"class":4306},[638,7509,7510],{"class":647}," 'clone'",[638,7512,4455],{"class":4306},[638,7514,7515],{"class":4299}," put",[638,7517,4388],{"class":4306},[638,7519,7520],{"class":5566}," false",[638,7522,7523],{"class":4306}," },",[638,7525,7526],{"class":5043},"  \u002F\u002F copies go out, nothing comes in\n",[638,7528,7529,7532,7534,7536,7538],{"class":640,"line":4361},[638,7530,7531],{"class":4299},"  sort",[638,7533,4388],{"class":4306},[638,7535,7520],{"class":5566},[638,7537,4455],{"class":4306},[638,7539,7540],{"class":5043},"                                          \u002F\u002F its own order stays\n",[638,7542,7543,7546,7548,7550,7553,7555,7557,7560,7563,7565,7567,7569,7571,7574,7576,7579,7582],{"class":640,"line":4368},[638,7544,7545],{"class":644},"  clone",[638,7547,4388],{"class":4306},[638,7549,4784],{"class":4306},[638,7551,7552],{"class":4299},"block",[638,7554,4790],{"class":4306},[638,7556,4503],{"class":4319},[638,7558,7559],{"class":4306}," ({",[638,7561,7562],{"class":4306}," ...",[638,7564,7552],{"class":4326},[638,7566,4455],{"class":4306},[638,7568,6039],{"class":4299},[638,7570,4388],{"class":4306},[638,7572,7573],{"class":644}," crypto",[638,7575,4509],{"class":4306},[638,7577,7578],{"class":644},"randomUUID",[638,7580,7581],{"class":4306},"()",[638,7583,7584],{"class":4306}," }),\n",[638,7586,7587],{"class":640,"line":4398},[638,7588,4520],{"class":4306},[481,7590,7591,7592,7594,7595,2593,7597,7599,7600,7602,7603,2798],{},"Pinia のストアや、直接書き込まないほかの状態では、",[501,7593,1126],{}," をゲッターで渡し、",[501,7596,507],{},[501,7598,2596],{}," を呼んで ",[501,7601,2273],{}," を適用します：",[808,7604,2604],{"href":2603},[873,7606,7608],{"id":7607},"a-custom-overlay","カスタムオーバーレイ",[481,7610,7611],{},[496,7612,710],{},[628,7614,7616],{"className":6585,"code":7615,"filename":5896,"language":6588,"meta":634,"style":634},"makeDraggable(el, {\n  render: markRaw(TaskOverlay),\n  data: () => props.task,\n});\n",[501,7617,7618,7630,7648,7666],{"__ignoreMap":634},[638,7619,7620,7622,7624,7626,7628],{"class":640,"line":641},[638,7621,134],{"class":644},[638,7623,4449],{"class":4306},[638,7625,4452],{"class":4326},[638,7627,4455],{"class":4306},[638,7629,4458],{"class":4306},[638,7631,7632,7635,7637,7640,7642,7645],{"class":640,"line":4316},[638,7633,7634],{"class":4299},"  render",[638,7636,4388],{"class":4306},[638,7638,7639],{"class":644}," markRaw",[638,7641,4449],{"class":4306},[638,7643,7644],{"class":4326},"TaskOverlay",[638,7646,7647],{"class":4306},"),\n",[638,7649,7650,7652,7654,7656,7658,7660,7662,7664],{"class":640,"line":4342},[638,7651,4495],{"class":644},[638,7653,4388],{"class":4306},[638,7655,4500],{"class":4306},[638,7657,4503],{"class":4319},[638,7659,4506],{"class":4326},[638,7661,4509],{"class":4306},[638,7663,5803],{"class":4326},[638,7665,4489],{"class":4306},[638,7667,7668],{"class":640,"line":4361},[638,7669,4520],{"class":4306},[628,7671,7674],{"className":4285,"code":7672,"filename":7673,"language":4288,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { useDnDProvider } from '@vue-dnd-kit\u002Fcore';\n\nconst { entities } = useDnDProvider();\nconst task = computed(() => {\n  const [node] = entities.draggingMap.keys();\n  return node ? (entities.draggableMap.get(node)?.data?.() as Task) : null;\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"task-preview\">{{ task?.title }}\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","TaskOverlay.vue",[501,7675,7676,7690,7707,7724,7728,7747,7766,7795,7847,7851,7855,7859,7863,7881],{"__ignoreMap":634},[638,7677,7678,7680,7682,7684,7686,7688],{"class":640,"line":641},[638,7679,4296],{"class":4295},[638,7681,4300],{"class":4299},[638,7683,4303],{"class":4299},[638,7685,4307],{"class":4306},[638,7687,4310],{"class":647},[638,7689,4313],{"class":4295},[638,7691,7692,7694,7696,7699,7701,7703,7705],{"class":640,"line":4316},[638,7693,4320],{"class":4319},[638,7695,4323],{"class":4306},[638,7697,7698],{"class":4326}," computed ",[638,7700,4330],{"class":4306},[638,7702,4333],{"class":4319},[638,7704,4336],{"class":647},[638,7706,4339],{"class":4306},[638,7708,7709,7711,7713,7716,7718,7720,7722],{"class":640,"line":4342},[638,7710,4320],{"class":4319},[638,7712,4323],{"class":4306},[638,7714,7715],{"class":4326}," useDnDProvider ",[638,7717,4330],{"class":4306},[638,7719,4333],{"class":4319},[638,7721,4356],{"class":647},[638,7723,4339],{"class":4306},[638,7725,7726],{"class":640,"line":4361},[638,7727,4365],{"emptyLinePlaceholder":4364},[638,7729,7730,7732,7734,7737,7739,7741,7744],{"class":640,"line":4368},[638,7731,4371],{"class":4319},[638,7733,4323],{"class":4306},[638,7735,7736],{"class":4326}," entities ",[638,7738,4330],{"class":4306},[638,7740,4443],{"class":4306},[638,7742,7743],{"class":644}," useDnDProvider",[638,7745,7746],{"class":4306},"();\n",[638,7748,7749,7751,7754,7756,7759,7762,7764],{"class":640,"line":4398},[638,7750,4371],{"class":4319},[638,7752,7753],{"class":4326}," task ",[638,7755,4307],{"class":4306},[638,7757,7758],{"class":644}," computed",[638,7760,7761],{"class":4306},"(()",[638,7763,4503],{"class":4319},[638,7765,4458],{"class":4306},[638,7767,7768,7770,7772,7775,7778,7780,7783,7785,7788,7790,7793],{"class":640,"line":4426},[638,7769,6620],{"class":4319},[638,7771,4469],{"class":4306},[638,7773,7774],{"class":4326},"node",[638,7776,7777],{"class":4306},"]",[638,7779,4443],{"class":4306},[638,7781,7782],{"class":644}," entities",[638,7784,4509],{"class":4306},[638,7786,7787],{"class":644},"draggingMap",[638,7789,4509],{"class":4306},[638,7791,7792],{"class":644},"keys",[638,7794,7746],{"class":4306},[638,7796,7797,7800,7803,7806,7808,7811,7813,7816,7818,7821,7823,7825,7828,7830,7833,7836,7838,7840,7842,7845],{"class":640,"line":4431},[638,7798,7799],{"class":4319},"  return",[638,7801,7802],{"class":4326}," node ",[638,7804,7805],{"class":4306},"?",[638,7807,4784],{"class":4306},[638,7809,7810],{"class":644},"entities",[638,7812,4509],{"class":4306},[638,7814,7815],{"class":644},"draggableMap",[638,7817,4509],{"class":4306},[638,7819,7820],{"class":644},"get",[638,7822,4449],{"class":4306},[638,7824,7774],{"class":4326},[638,7826,7827],{"class":4306},")?.",[638,7829,1427],{"class":644},[638,7831,7832],{"class":4306},"?.()",[638,7834,7835],{"class":4319}," as",[638,7837,5704],{"class":4391},[638,7839,4790],{"class":4306},[638,7841,5820],{"class":4306},[638,7843,7844],{"class":5566}," null",[638,7846,4339],{"class":4306},[638,7848,7849],{"class":640,"line":4461},[638,7850,4520],{"class":4306},[638,7852,7853],{"class":640,"line":4478},[638,7854,4526],{"class":4295},[638,7856,7857],{"class":640,"line":4492},[638,7858,4365],{"emptyLinePlaceholder":4364},[638,7860,7861],{"class":640,"line":4517},[638,7862,4537],{"class":4295},[638,7864,7865,7867,7869,7871,7874,7876,7879],{"class":640,"line":4523},[638,7866,4543],{"class":4295},[638,7868,4578],{"class":4299},[638,7870,4307],{"class":4306},[638,7872,7873],{"class":647},"\"task-preview\"",[638,7875,4586],{"class":4295},[638,7877,7878],{"class":4326},"{{ task?.title }}",[638,7880,6116],{"class":4295},[638,7882,7883],{"class":640,"line":4529},[638,7884,4610],{"class":4295},[481,7886,7887],{},[496,7888,713],{},[628,7890,7892],{"className":6585,"code":7891,"filename":5896,"language":6588,"meta":634,"style":634},"makeDraggable(el, {\n  id: () => props.task.id,\n  overlay: TaskOverlay,\n  data: () => props.task,\n});\n",[501,7893,7894,7906,7928,7940,7958],{"__ignoreMap":634},[638,7895,7896,7898,7900,7902,7904],{"class":640,"line":641},[638,7897,134],{"class":644},[638,7899,4449],{"class":4306},[638,7901,4452],{"class":4326},[638,7903,4455],{"class":4306},[638,7905,4458],{"class":4306},[638,7907,7908,7910,7912,7914,7916,7918,7920,7922,7924,7926],{"class":640,"line":4316},[638,7909,5022],{"class":644},[638,7911,4388],{"class":4306},[638,7913,4500],{"class":4306},[638,7915,4503],{"class":4319},[638,7917,4506],{"class":4326},[638,7919,4509],{"class":4306},[638,7921,5803],{"class":4326},[638,7923,4509],{"class":4306},[638,7925,1419],{"class":4326},[638,7927,4489],{"class":4306},[638,7929,7930,7933,7935,7938],{"class":640,"line":4342},[638,7931,7932],{"class":4299},"  overlay",[638,7934,4388],{"class":4306},[638,7936,7937],{"class":4326}," TaskOverlay",[638,7939,4489],{"class":4306},[638,7941,7942,7944,7946,7948,7950,7952,7954,7956],{"class":640,"line":4361},[638,7943,4495],{"class":644},[638,7945,4388],{"class":4306},[638,7947,4500],{"class":4306},[638,7949,4503],{"class":4319},[638,7951,4506],{"class":4326},[638,7953,4509],{"class":4306},[638,7955,5803],{"class":4326},[638,7957,4489],{"class":4306},[638,7959,7960],{"class":640,"line":4368},[638,7961,4520],{"class":4306},[628,7963,7965],{"className":4285,"code":7964,"filename":7673,"language":4288,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { DragItem, Over } from '@vue-dnd-kit\u002Fcore';\n\nconst props = defineProps\u003C{ items: DragItem[]; over: Over | null; accepted: boolean }>();\nconst task = computed(() => props.items[0]!.data as Task);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- Fills the overlay box, which takes the size of the slot. -->\n  \u003Cdiv class=\"task-preview\" :class=\"{ refused: over && !accepted }\">\n    {{ task.title }}\n    \u003Cspan v-if=\"items.length > 1\" class=\"count\">{{ items.length }}\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.task-preview { width: 100%; height: 100%; }\n\u003C\u002Fstyle>\n",[501,7966,7967,7981,7997,8021,8025,8071,8106,8110,8114,8118,8123,8142,8147,8173,8177,8181,8185,8195,8231],{"__ignoreMap":634},[638,7968,7969,7971,7973,7975,7977,7979],{"class":640,"line":641},[638,7970,4296],{"class":4295},[638,7972,4300],{"class":4299},[638,7974,4303],{"class":4299},[638,7976,4307],{"class":4306},[638,7978,4310],{"class":647},[638,7980,4313],{"class":4295},[638,7982,7983,7985,7987,7989,7991,7993,7995],{"class":640,"line":4316},[638,7984,4320],{"class":4319},[638,7986,4323],{"class":4306},[638,7988,7698],{"class":4326},[638,7990,4330],{"class":4306},[638,7992,4333],{"class":4319},[638,7994,4336],{"class":647},[638,7996,4339],{"class":4306},[638,7998,7999,8001,8003,8005,8008,8010,8013,8015,8017,8019],{"class":640,"line":4342},[638,8000,4320],{"class":4319},[638,8002,5130],{"class":4319},[638,8004,4323],{"class":4306},[638,8006,8007],{"class":4326}," DragItem",[638,8009,4455],{"class":4306},[638,8011,8012],{"class":4326}," Over ",[638,8014,4330],{"class":4306},[638,8016,4333],{"class":4319},[638,8018,4356],{"class":647},[638,8020,4339],{"class":4306},[638,8022,8023],{"class":640,"line":4361},[638,8024,4365],{"emptyLinePlaceholder":4364},[638,8026,8027,8029,8031,8033,8035,8037,8039,8041,8043,8046,8049,8051,8054,8057,8059,8061,8064,8066,8069],{"class":640,"line":4368},[638,8028,4371],{"class":4319},[638,8030,4374],{"class":4326},[638,8032,4307],{"class":4306},[638,8034,4379],{"class":644},[638,8036,4382],{"class":4306},[638,8038,6267],{"class":4326},[638,8040,4388],{"class":4306},[638,8042,8007],{"class":4391},[638,8044,8045],{"class":4306},"[];",[638,8047,8048],{"class":4326}," over",[638,8050,4388],{"class":4306},[638,8052,8053],{"class":4391}," Over",[638,8055,8056],{"class":4306}," |",[638,8058,7844],{"class":4391},[638,8060,5970],{"class":4306},[638,8062,8063],{"class":4326}," accepted",[638,8065,4388],{"class":4306},[638,8067,8068],{"class":4391}," boolean",[638,8070,4395],{"class":4306},[638,8072,8073,8075,8077,8079,8081,8083,8085,8087,8089,8091,8093,8095,8098,8100,8102,8104],{"class":640,"line":4398},[638,8074,4371],{"class":4319},[638,8076,7753],{"class":4326},[638,8078,4307],{"class":4306},[638,8080,7758],{"class":644},[638,8082,7761],{"class":4306},[638,8084,4503],{"class":4319},[638,8086,4506],{"class":4326},[638,8088,4509],{"class":4306},[638,8090,1126],{"class":4326},[638,8092,6679],{"class":4306},[638,8094,1513],{"class":5566},[638,8096,8097],{"class":4306},"]!.",[638,8099,4833],{"class":4326},[638,8101,4836],{"class":4319},[638,8103,5704],{"class":4391},[638,8105,4423],{"class":4306},[638,8107,8108],{"class":640,"line":4426},[638,8109,4526],{"class":4295},[638,8111,8112],{"class":640,"line":4431},[638,8113,4365],{"emptyLinePlaceholder":4364},[638,8115,8116],{"class":640,"line":4461},[638,8117,4537],{"class":4295},[638,8119,8120],{"class":640,"line":4478},[638,8121,8122],{"class":5043},"  \u003C!-- Fills the overlay box, which takes the size of the slot. -->\n",[638,8124,8125,8127,8129,8131,8133,8135,8137,8140],{"class":640,"line":4492},[638,8126,4543],{"class":4295},[638,8128,4578],{"class":4299},[638,8130,4307],{"class":4306},[638,8132,7873],{"class":647},[638,8134,4562],{"class":4299},[638,8136,4307],{"class":4306},[638,8138,8139],{"class":647},"\"{ refused: over && !accepted }\"",[638,8141,4313],{"class":4295},[638,8143,8144],{"class":640,"line":4517},[638,8145,8146],{"class":4326},"    {{ task.title }}\n",[638,8148,8149,8151,8154,8156,8159,8161,8163,8166,8168,8171],{"class":640,"line":4523},[638,8150,4575],{"class":4295},[638,8152,8153],{"class":4299}," v-if",[638,8155,4307],{"class":4306},[638,8157,8158],{"class":647},"\"items.length > 1\"",[638,8160,4578],{"class":4299},[638,8162,4307],{"class":4306},[638,8164,8165],{"class":647},"\"count\"",[638,8167,4586],{"class":4295},[638,8169,8170],{"class":4326},"{{ items.length }}",[638,8172,4592],{"class":4295},[638,8174,8175],{"class":640,"line":4529},[638,8176,4604],{"class":4295},[638,8178,8179],{"class":640,"line":4534},[638,8180,4610],{"class":4295},[638,8182,8183],{"class":640,"line":4540},[638,8184,4365],{"emptyLinePlaceholder":4364},[638,8186,8187,8190,8193],{"class":640,"line":4572},[638,8188,8189],{"class":4295},"\u003Cstyle",[638,8191,8192],{"class":4299}," scoped",[638,8194,4313],{"class":4295},[638,8196,8197,8199,8202,8204,8207,8209,8212,8215,8217,8220,8222,8224,8226,8228],{"class":640,"line":4595},[638,8198,4509],{"class":4306},[638,8200,8201],{"class":4299},"task-preview",[638,8203,4323],{"class":4306},[638,8205,8206],{"class":4391}," width",[638,8208,4388],{"class":4306},[638,8210,8211],{"class":5566}," 100",[638,8213,8214],{"class":4319},"%",[638,8216,5970],{"class":4306},[638,8218,8219],{"class":4391}," height",[638,8221,4388],{"class":4306},[638,8223,8211],{"class":5566},[638,8225,8214],{"class":4319},[638,8227,5970],{"class":4306},[638,8229,8230],{"class":4306}," }\n",[638,8232,8233],{"class":640,"line":4601},[638,8234,8235],{"class":4295},"\u003C\u002Fstyle>\n",[490,8237,8238,8258],{},[493,8239,8240,8241,8243,8244,1021,8246,1021,8248,1021,8250,1021,8252,8254,8255,1970],{},"コンポーネントはドラッグを props として受け取ります：",[501,8242,1126],{},"（ドラッグ中のすべてのアイテム、掴んだものが先頭）、",[501,8245,1132],{},[501,8247,1135],{},[501,8249,1138],{},[501,8251,1141],{},[501,8253,1144],{},"。読むものだけを宣言してください。リストの行では、リストのアイテムは ",[501,8256,8257],{},"items[0].item",[493,8259,8260,8261,8263,8264,8267],{},"そのまま渡します。切り替えるには ",[501,8262,2883],{}," を使い、深い ",[501,8265,8266],{},"ref"," は決して使いません。",[481,8269,8270],{},"プロバイダーのスロットも同じように変わり、コンポーネントが自分で位置を決めることはなくなります：",[481,8272,8273],{},[496,8274,710],{},[628,8276,8279],{"className":4285,"code":8277,"filename":8278,"language":4288,"meta":634,"style":634},"\u003CDnDProvider>\n  \u003CRouterView \u002F>\n  \u003Ctemplate #preview>\n    \u003CMyOverlay \u002F>  \u003C!-- moved itself with useDnDProvider().preview.position -->\n  \u003C\u002Ftemplate>\n\u003C\u002FDnDProvider>\n","App.vue",[501,8280,8281,8286,8291,8296,8301,8306],{"__ignoreMap":634},[638,8282,8283],{"class":640,"line":641},[638,8284,8285],{"class":4295},"\u003CDnDProvider>\n",[638,8287,8288],{"class":640,"line":4316},[638,8289,8290],{"class":4326},"  \u003CRouterView \u002F>\n",[638,8292,8293],{"class":640,"line":4342},[638,8294,8295],{"class":4326},"  \u003Ctemplate #preview>\n",[638,8297,8298],{"class":640,"line":4361},[638,8299,8300],{"class":4326},"    \u003CMyOverlay \u002F>  \u003C!-- moved itself with useDnDProvider().preview.position -->\n",[638,8302,8303],{"class":640,"line":4368},[638,8304,8305],{"class":4326},"  \u003C\u002Ftemplate>\n",[638,8307,8308],{"class":640,"line":4398},[638,8309,8310],{"class":4295},"\u003C\u002FDnDProvider>\n",[481,8312,8313],{},[496,8314,713],{},[628,8316,8318],{"className":4285,"code":8317,"filename":8278,"language":4288,"meta":634,"style":634},"\u003CDnDProvider>\n  \u003CRouterView \u002F>\n  \u003Ctemplate #overlay=\"{ items, over, accepted }\">\n    \u003CMyOverlay :items=\"items\" :over=\"over\" :accepted=\"accepted\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FDnDProvider>\n",[501,8319,8320,8324,8328,8333,8338,8342],{"__ignoreMap":634},[638,8321,8322],{"class":640,"line":641},[638,8323,8285],{"class":4295},[638,8325,8326],{"class":640,"line":4316},[638,8327,8290],{"class":4326},[638,8329,8330],{"class":640,"line":4342},[638,8331,8332],{"class":4326},"  \u003Ctemplate #overlay=\"{ items, over, accepted }\">\n",[638,8334,8335],{"class":640,"line":4361},[638,8336,8337],{"class":4326},"    \u003CMyOverlay :items=\"items\" :over=\"over\" :accepted=\"accepted\" \u002F>\n",[638,8339,8340],{"class":640,"line":4368},[638,8341,8305],{"class":4326},[638,8343,8344],{"class":640,"line":4398},[638,8345,8310],{"class":4295},[481,8347,8348,837,8350,8352,8353,2994,8355,8357,8358,2798],{},[501,8349,1008],{},[501,8351,2983],{}," で囲んでいたポップインは、",[501,8354,2993],{},[501,8356,2997],{}," になります：",[808,8359,3007],{"href":3006},[873,8361,8363],{"id":8362},"a-drop-you-confirm","確認してからのドロップ",[481,8365,8366],{},[496,8367,710],{},[628,8369,8371],{"className":6585,"code":8370,"filename":4614,"language":6588,"meta":634,"style":634},"makeDroppable(el, {\n  events: {\n    onDrop: (e) =>\n      new Promise\u003Cvoid | boolean>((resolve) => {\n        if (!window.confirm('Drop here?')) return resolve(false); \u002F\u002F keep dragging\n        place(e.draggedItems);\n        resolve();\n      }),\n  },\n});\n",[501,8372,8373,8385,8393,8408,8437,8474,8489,8496,8501,8505],{"__ignoreMap":634},[638,8374,8375,8377,8379,8381,8383],{"class":640,"line":641},[638,8376,138],{"class":644},[638,8378,4449],{"class":4306},[638,8380,4452],{"class":4326},[638,8382,4455],{"class":4306},[638,8384,4458],{"class":4306},[638,8386,8387,8389,8391],{"class":640,"line":4316},[638,8388,4770],{"class":4299},[638,8390,4388],{"class":4306},[638,8392,4458],{"class":4306},[638,8394,8395,8397,8399,8401,8403,8405],{"class":640,"line":4342},[638,8396,4779],{"class":644},[638,8398,4388],{"class":4306},[638,8400,4784],{"class":4306},[638,8402,4787],{"class":4299},[638,8404,4790],{"class":4306},[638,8406,8407],{"class":4319}," =>\n",[638,8409,8410,8413,8416,8418,8421,8423,8425,8428,8431,8433,8435],{"class":640,"line":4361},[638,8411,8412],{"class":4319},"      new",[638,8414,8415],{"class":4391}," Promise",[638,8417,4411],{"class":4306},[638,8419,8420],{"class":4391},"void",[638,8422,8056],{"class":4306},[638,8424,8068],{"class":4391},[638,8426,8427],{"class":4306},">((",[638,8429,8430],{"class":4299},"resolve",[638,8432,4790],{"class":4306},[638,8434,4503],{"class":4319},[638,8436,4458],{"class":4306},[638,8438,8439,8441,8443,8446,8448,8451,8453,8456,8459,8461,8464,8466,8468,8471],{"class":640,"line":4368},[638,8440,5674],{"class":4319},[638,8442,6648],{"class":4306},[638,8444,8445],{"class":644},"window",[638,8447,4509],{"class":4306},[638,8449,8450],{"class":644},"confirm",[638,8452,4449],{"class":4306},[638,8454,8455],{"class":647},"'Drop here?'",[638,8457,8458],{"class":4306},"))",[638,8460,6655],{"class":4319},[638,8462,8463],{"class":644}," resolve",[638,8465,4449],{"class":4306},[638,8467,1092],{"class":5566},[638,8469,8470],{"class":4306},");",[638,8472,8473],{"class":5043}," \u002F\u002F keep dragging\n",[638,8475,8476,8479,8481,8483,8485,8487],{"class":640,"line":4398},[638,8477,8478],{"class":644},"        place",[638,8480,4449],{"class":4306},[638,8482,4787],{"class":4326},[638,8484,4509],{"class":4306},[638,8486,4810],{"class":4326},[638,8488,4423],{"class":4306},[638,8490,8491,8494],{"class":640,"line":4426},[638,8492,8493],{"class":644},"        resolve",[638,8495,7746],{"class":4306},[638,8497,8498],{"class":640,"line":4431},[638,8499,8500],{"class":4306},"      }),\n",[638,8502,8503],{"class":640,"line":4461},[638,8504,4846],{"class":4306},[638,8506,8507],{"class":640,"line":4478},[638,8508,4520],{"class":4306},[481,8510,8511],{},[496,8512,713],{},[628,8514,8516],{"className":6585,"code":8515,"filename":4614,"language":6588,"meta":634,"style":634},"makeDroppable(el, {\n  onBeforeDrop: () => (window.confirm('Drop here?') ? 'accept' : 'continue'),\n  onDrop: (e) => place(e.active.items),\n});\n",[501,8517,8518,8530,8568,8599],{"__ignoreMap":634},[638,8519,8520,8522,8524,8526,8528],{"class":640,"line":641},[638,8521,138],{"class":644},[638,8523,4449],{"class":4306},[638,8525,4452],{"class":4326},[638,8527,4455],{"class":4306},[638,8529,4458],{"class":4306},[638,8531,8532,8535,8537,8539,8541,8543,8545,8547,8549,8551,8553,8555,8558,8561,8563,8566],{"class":640,"line":4316},[638,8533,8534],{"class":644},"  onBeforeDrop",[638,8536,4388],{"class":4306},[638,8538,4500],{"class":4306},[638,8540,4503],{"class":4319},[638,8542,4784],{"class":4306},[638,8544,8445],{"class":644},[638,8546,4509],{"class":4306},[638,8548,8450],{"class":644},[638,8550,4449],{"class":4306},[638,8552,8455],{"class":647},[638,8554,4790],{"class":4306},[638,8556,8557],{"class":4306}," ?",[638,8559,8560],{"class":647}," 'accept'",[638,8562,5820],{"class":4306},[638,8564,8565],{"class":647}," 'continue'",[638,8567,7647],{"class":4306},[638,8569,8570,8572,8574,8576,8578,8580,8582,8585,8587,8589,8591,8593,8595,8597],{"class":640,"line":4342},[638,8571,5320],{"class":644},[638,8573,4388],{"class":4306},[638,8575,4784],{"class":4306},[638,8577,4787],{"class":4299},[638,8579,4790],{"class":4306},[638,8581,4503],{"class":4319},[638,8583,8584],{"class":644}," place",[638,8586,4449],{"class":4306},[638,8588,4787],{"class":4326},[638,8590,4509],{"class":4306},[638,8592,1129],{"class":4326},[638,8594,4509],{"class":4306},[638,8596,1126],{"class":4326},[638,8598,7647],{"class":4306},[638,8600,8601],{"class":640,"line":4361},[638,8602,4520],{"class":4306},[481,8604,8605],{},"リストも同じように尋ね、Promise を使えば自作のダイアログを開けます。Promise が確定するまで、オーバーレイは離した場所で待ちます：",[628,8607,8609],{"className":6585,"code":8608,"filename":6935,"language":6588,"meta":634,"style":634},"makeSortableList(el, {\n  items: toRef(props.column, 'tasks'),\n  group: 'board',\n  \u002F\u002F `ask` opens a dialog and resolves 'accept', 'continue' or 'reject'.\n  onBeforeDrop: (e) => (e.sameList ? 'accept' : ask(e)),\n});\n",[501,8610,8611,8623,8645,8655,8660,8698],{"__ignoreMap":634},[638,8612,8613,8615,8617,8619,8621],{"class":640,"line":641},[638,8614,143],{"class":644},[638,8616,4449],{"class":4306},[638,8618,4452],{"class":4326},[638,8620,4455],{"class":4306},[638,8622,4458],{"class":4306},[638,8624,8625,8627,8629,8631,8633,8635,8637,8639,8641,8643],{"class":640,"line":4316},[638,8626,7118],{"class":4299},[638,8628,4388],{"class":4306},[638,8630,6960],{"class":644},[638,8632,4449],{"class":4306},[638,8634,6064],{"class":4326},[638,8636,4509],{"class":4306},[638,8638,7104],{"class":4326},[638,8640,4455],{"class":4306},[638,8642,7135],{"class":647},[638,8644,7647],{"class":4306},[638,8646,8647,8649,8651,8653],{"class":640,"line":4342},[638,8648,7146],{"class":4299},[638,8650,4388],{"class":4306},[638,8652,7151],{"class":647},[638,8654,4489],{"class":4306},[638,8656,8657],{"class":640,"line":4361},[638,8658,8659],{"class":5043},"  \u002F\u002F `ask` opens a dialog and resolves 'accept', 'continue' or 'reject'.\n",[638,8661,8662,8664,8666,8668,8670,8672,8674,8676,8678,8680,8683,8685,8687,8689,8692,8694,8696],{"class":640,"line":4368},[638,8663,8534],{"class":644},[638,8665,4388],{"class":4306},[638,8667,4784],{"class":4306},[638,8669,4787],{"class":4299},[638,8671,4790],{"class":4306},[638,8673,4503],{"class":4319},[638,8675,4784],{"class":4306},[638,8677,4787],{"class":4326},[638,8679,4509],{"class":4306},[638,8681,8682],{"class":4326},"sameList ",[638,8684,7805],{"class":4306},[638,8686,8560],{"class":647},[638,8688,5820],{"class":4306},[638,8690,8691],{"class":644}," ask",[638,8693,4449],{"class":4306},[638,8695,4787],{"class":4326},[638,8697,4841],{"class":4306},[638,8699,8700],{"class":640,"line":4398},[638,8701,4520],{"class":4306},[481,8703,8704,8705,8708],{},"混在した選択のうち、一致する部分だけを受け取っていたゾーン（",[501,8706,8707],{},"groupMatch: 'some'","）：",[481,8710,8711],{},[496,8712,710],{},[628,8714,8716],{"className":6585,"code":8715,"filename":4614,"language":6588,"meta":634,"style":634},"makeDroppable(el, {\n  groups: ['frontend'],\n  groupMatch: 'some',\n  events: {\n    onDrop: (e) => place(e.draggedItems), \u002F\u002F only the items of the group arrive\n  },\n});\n",[501,8717,8718,8730,8743,8755,8763,8792,8796],{"__ignoreMap":634},[638,8719,8720,8722,8724,8726,8728],{"class":640,"line":641},[638,8721,138],{"class":644},[638,8723,4449],{"class":4306},[638,8725,4452],{"class":4326},[638,8727,4455],{"class":4306},[638,8729,4458],{"class":4306},[638,8731,8732,8734,8736,8738,8741],{"class":640,"line":4316},[638,8733,4464],{"class":4299},[638,8735,4388],{"class":4306},[638,8737,4469],{"class":4306},[638,8739,8740],{"class":647},"'frontend'",[638,8742,4475],{"class":4306},[638,8744,8745,8748,8750,8753],{"class":640,"line":4342},[638,8746,8747],{"class":4299},"  groupMatch",[638,8749,4388],{"class":4306},[638,8751,8752],{"class":647}," 'some'",[638,8754,4489],{"class":4306},[638,8756,8757,8759,8761],{"class":640,"line":4361},[638,8758,4770],{"class":4299},[638,8760,4388],{"class":4306},[638,8762,4458],{"class":4306},[638,8764,8765,8767,8769,8771,8773,8775,8777,8779,8781,8783,8785,8787,8789],{"class":640,"line":4368},[638,8766,4779],{"class":644},[638,8768,4388],{"class":4306},[638,8770,4784],{"class":4306},[638,8772,4787],{"class":4299},[638,8774,4790],{"class":4306},[638,8776,4503],{"class":4319},[638,8778,8584],{"class":644},[638,8780,4449],{"class":4306},[638,8782,4787],{"class":4326},[638,8784,4509],{"class":4306},[638,8786,4810],{"class":4326},[638,8788,7138],{"class":4306},[638,8790,8791],{"class":5043}," \u002F\u002F only the items of the group arrive\n",[638,8793,8794],{"class":640,"line":4398},[638,8795,4846],{"class":4306},[638,8797,8798],{"class":640,"line":4426},[638,8799,4520],{"class":4306},[481,8801,8802],{},[496,8803,713],{},[628,8805,8807],{"className":6585,"code":8806,"filename":4614,"language":6588,"meta":634,"style":634},"import type { DragItem } from '@vue-dnd-kit\u002Fcore';\n\nconst fits = (item: DragItem) => item.type.length === 0 || item.type.includes('frontend');\n\nmakeDroppable(el, {\n  accept: 'frontend',\n  acceptMode: 'some',\n  onBeforeDrop: (e) => e.active.items.filter(fits).map((item) => item.id), \u002F\u002F the others fly back\n  onDrop: (e) => place(e.active.items.filter(fits)), \u002F\u002F `active.items` still lists every dragged item\n});\n",[501,8808,8809,8828,8832,8889,8893,8905,8916,8927,8985,9027],{"__ignoreMap":634},[638,8810,8811,8813,8815,8817,8820,8822,8824,8826],{"class":640,"line":641},[638,8812,4320],{"class":4319},[638,8814,5130],{"class":4319},[638,8816,4323],{"class":4306},[638,8818,8819],{"class":4326}," DragItem ",[638,8821,4330],{"class":4306},[638,8823,4333],{"class":4319},[638,8825,4356],{"class":647},[638,8827,4339],{"class":4306},[638,8829,8830],{"class":640,"line":4316},[638,8831,4365],{"emptyLinePlaceholder":4364},[638,8833,8834,8836,8839,8841,8843,8845,8847,8849,8851,8853,8855,8857,8859,8861,8864,8866,8869,8872,8874,8876,8878,8880,8883,8885,8887],{"class":640,"line":4342},[638,8835,4371],{"class":4319},[638,8837,8838],{"class":644}," fits",[638,8840,4443],{"class":4306},[638,8842,4784],{"class":4306},[638,8844,4821],{"class":4299},[638,8846,4388],{"class":4306},[638,8848,8007],{"class":4391},[638,8850,4790],{"class":4306},[638,8852,4503],{"class":4319},[638,8854,4828],{"class":4326},[638,8856,4509],{"class":4306},[638,8858,1430],{"class":4326},[638,8860,4509],{"class":4306},[638,8862,8863],{"class":4326},"length ",[638,8865,6742],{"class":4306},[638,8867,8868],{"class":5566}," 0",[638,8870,8871],{"class":4306}," ||",[638,8873,4828],{"class":644},[638,8875,4509],{"class":4306},[638,8877,1430],{"class":644},[638,8879,4509],{"class":4306},[638,8881,8882],{"class":644},"includes",[638,8884,4449],{"class":4306},[638,8886,8740],{"class":647},[638,8888,4423],{"class":4306},[638,8890,8891],{"class":640,"line":4361},[638,8892,4365],{"emptyLinePlaceholder":4364},[638,8894,8895,8897,8899,8901,8903],{"class":640,"line":4368},[638,8896,138],{"class":644},[638,8898,4449],{"class":4306},[638,8900,4452],{"class":4326},[638,8902,4455],{"class":4306},[638,8904,4458],{"class":4306},[638,8906,8907,8909,8911,8914],{"class":640,"line":4398},[638,8908,5309],{"class":4299},[638,8910,4388],{"class":4306},[638,8912,8913],{"class":647}," 'frontend'",[638,8915,4489],{"class":4306},[638,8917,8918,8921,8923,8925],{"class":640,"line":4426},[638,8919,8920],{"class":4299},"  acceptMode",[638,8922,4388],{"class":4306},[638,8924,8752],{"class":647},[638,8926,4489],{"class":4306},[638,8928,8929,8931,8933,8935,8937,8939,8941,8943,8945,8947,8949,8951,8953,8956,8958,8961,8964,8966,8968,8970,8972,8974,8976,8978,8980,8982],{"class":640,"line":4431},[638,8930,8534],{"class":644},[638,8932,4388],{"class":4306},[638,8934,4784],{"class":4306},[638,8936,4787],{"class":4299},[638,8938,4790],{"class":4306},[638,8940,4503],{"class":4319},[638,8942,4805],{"class":644},[638,8944,4509],{"class":4306},[638,8946,1129],{"class":644},[638,8948,4509],{"class":4306},[638,8950,1126],{"class":644},[638,8952,4509],{"class":4306},[638,8954,8955],{"class":644},"filter",[638,8957,4449],{"class":4306},[638,8959,8960],{"class":4326},"fits",[638,8962,8963],{"class":4306},").",[638,8965,4815],{"class":644},[638,8967,4818],{"class":4306},[638,8969,4821],{"class":4299},[638,8971,4790],{"class":4306},[638,8973,4503],{"class":4319},[638,8975,4828],{"class":4326},[638,8977,4509],{"class":4306},[638,8979,1419],{"class":4326},[638,8981,7138],{"class":4306},[638,8983,8984],{"class":5043}," \u002F\u002F the others fly back\n",[638,8986,8987,8989,8991,8993,8995,8997,8999,9001,9003,9005,9007,9009,9011,9013,9015,9017,9019,9021,9024],{"class":640,"line":4461},[638,8988,5320],{"class":644},[638,8990,4388],{"class":4306},[638,8992,4784],{"class":4306},[638,8994,4787],{"class":4299},[638,8996,4790],{"class":4306},[638,8998,4503],{"class":4319},[638,9000,8584],{"class":644},[638,9002,4449],{"class":4306},[638,9004,4787],{"class":644},[638,9006,4509],{"class":4306},[638,9008,1129],{"class":644},[638,9010,4509],{"class":4306},[638,9012,1126],{"class":644},[638,9014,4509],{"class":4306},[638,9016,8955],{"class":644},[638,9018,4449],{"class":4306},[638,9020,8960],{"class":4326},[638,9022,9023],{"class":4306},")),",[638,9025,9026],{"class":5043}," \u002F\u002F `active.items` still lists every dragged item\n",[638,9028,9029],{"class":640,"line":4478},[638,9030,4520],{"class":4306},[481,9032,9033,9034,9036,9037,9040],{},"リストはこれをコードなしで行います：",[501,9035,3224],{}," にすると、",[501,9038,9039],{},"group.put"," が受け入れるアイテムは着地し、ほかは元の位置に戻ります。",[485,9042,9044],{"id":9043},"pitfalls-when-upgrading","アップグレードの注意点",[490,9046,9047,9064,9075,9094,9115,9126,9135,9149,9162,9181,9203,9212,9224,9232],{},[493,9048,9049,603,9052,772,9054,1082,9056,9059,9060,9063],{},[496,9050,9051],{},"v3 は範囲を指定してインストールします",[501,9053,771],{},[501,9055,779],{},[501,9057,9058],{},"npm update"," では ",[501,9061,9062],{},"^2"," は v2 のままです。",[493,9065,9066,9069,9070,3079,9072,9074],{},[496,9067,9068],{},"ドラフトを描画します","。リストが描画するのは ",[501,9071,143],{},[501,9073,1126],{}," で、自分の配列ではありません。自分の配列を描画すると、ドロップするまで何も動きません。",[493,9076,9077,9080,9081,9083,9084,9086,9087,9089,9090,7599,9092,1630],{},[496,9078,9079],{},"二重に並べ替えません","。リストから ",[501,9082,5662],{}," のコードを削除してください：リストは ",[501,9085,507],{}," の後に、書き込み可能な ",[501,9088,1126],{}," の ref に各ドロップを書き込みます。自分で適用するには、",[501,9091,2596],{},[501,9093,2273],{},[493,9095,9096,9101,9102,9104,9105,9107,9108,1514,9110,1889,9112,9114],{},[496,9097,9098,9100],{},[501,9099,1092],{}," はドロップを拒否します","。v2 では、",[501,9103,1092],{}," で解決した ",[501,9106,507],{}," はドラッグを続けました。v3 では ",[501,9109,588],{},[501,9111,3820],{},[501,9113,507],{}," から返した Promise は無視されます。",[493,9116,9117,603,9123,9125],{},[496,9118,9119,9120,9122],{},"リストが共有するのは同じ ",[501,9121,578],{}," の中だけです",[501,9124,578],{}," のないリストは、ほかのどのリストともやり取りしません。",[493,9127,9128,603,9131,9134],{},[496,9129,9130],{},"行のキーは id にします",[501,9132,9133],{},":key=\"index\""," では違う行がアニメーションします。id もデータから渡してください：デフォルトの id はコンポーネントのインスタンスごとに新しくなります。",[493,9136,9137,9148],{},[496,9138,9139,6563,9141,9143,9144,9147],{},[501,9140,531],{},[501,9142,1925],{}," への ",[501,9145,9146],{},"transition"," も使いません","。ライブラリが自分で行を動かすので、動きが二重にアニメーションしてしまいます。",[493,9150,9151,9154,9155,9157,9158,9161],{},[496,9152,9153],{},"タッチの回避策を元に戻します","。アイテム全体の ",[501,9156,853],{}," は、指の下でページがスクロールするのを妨げます。v3 は代わりに長押しでタッチのドラッグを始めます。すぐにドラッグしたいハンドルには、",[501,9159,9160],{},"activation: { touch: { distance: 4 } }"," と一緒に残してください。",[493,9163,9164,9167,9168,1021,9170,9172,9173,9175,9176,2737,9178,9180],{},[496,9165,9166],{},"古い属性を削除します","。ライブラリは ",[501,9169,846],{},[501,9171,3499],{},"、必要な ",[501,9174,5427],{}," を設定し、自分で付けた属性は決して上書きしません。そのため、残った ",[501,9177,3499],{},[501,9179,849],{}," は残したままになります。",[493,9182,9183,603,9186,9188,9189,9192,9193,9195,9196,9199,9200,9202],{},[496,9184,9185],{},"オーバーレイのスタイルを付け直します",[501,9187,3014],{}," はなくなりました：",[501,9190,9191],{},"[data-dnd-overlay='dragging']"," の中身にスタイルを付け、ボックスの ",[501,9194,1925],{}," には決して触れません。オーバーレイコンポーネントのルートには ",[501,9197,9198],{},"width: 100%; height: 100%"," を指定し、レイアウトから ",[501,9201,4237],{}," を取り除きます。",[493,9204,9205,9208,9209,9211],{},[496,9206,9207],{},"自動スクロールはオンです","。v2 でスクロールしなかった場所には ",[501,9210,3380],{}," を渡します。",[493,9213,9214,603,9217,9219,9220,9223],{},[496,9215,9216],{},"選択枠にキーは要りません",[501,9218,157],{}," は、空いている場所を普通に押すだけで描画します。v2 の Ctrl を残すには ",[501,9221,9222],{},"modifier"," を追加します。",[493,9225,9226,9229,9230,1630],{},[496,9227,9228],{},"プロバイダーは 1 つ、エリアはその中に","。アイテムはプロバイダーをまたげません。ルールを分けるために領域ごとにプロバイダーを使っていたページでは、プロバイダーを 1 つにし、領域ごとに ",[501,9231,162],{},[493,9233,9234,603,9237,515,9239,9241],{},[496,9235,9236],{},"引数は 2 つです",[501,9238,134],{},[501,9240,138],{}," は ref とオプションのオブジェクトを受け取り、ペイロードはありません。",[9243,9244,9245],"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 .sf6mc, html code.shiki .sf6mc{--shiki-light:#CF2257;--shiki-default:#CF2257;--shiki-dark:#FF7B9C}html pre.shiki code .sVvmN, html code.shiki .sVvmN{--shiki-light:#7C4DCC;--shiki-default:#7C4DCC;--shiki-dark:#C3A6FF}html pre.shiki code .s6cML, html code.shiki .s6cML{--shiki-light:#5B5B63;--shiki-default:#5B5B63;--shiki-dark:#9F9FA9}html pre.shiki code .s78Kj, html code.shiki .s78Kj{--shiki-light:#1F8A5B;--shiki-default:#1F8A5B;--shiki-dark:#42B883}html pre.shiki code .snmWg, html code.shiki .snmWg{--shiki-light:#27272A;--shiki-default:#27272A;--shiki-dark:#E4E4E7}html pre.shiki code .sR6Ar, html code.shiki .sR6Ar{--shiki-light:#0F766E;--shiki-default:#0F766E;--shiki-dark:#7EE0C0}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 .s3IRZ, html code.shiki .s3IRZ{--shiki-light:#BC4C00;--shiki-default:#BC4C00;--shiki-dark:#F4A261}",{"title":634,"searchDepth":4342,"depth":4342,"links":9247},[9248,9249,9250,9269,9276],{"id":487,"depth":4316,"text":488},{"id":622,"depth":4316,"text":623},{"id":863,"depth":4316,"text":864,"children":9251},[9252,9253,9254,9256,9257,9258,9259,9260,9261,9262,9263,9264,9265,9266,9267,9268],{"id":875,"depth":4342,"text":876},{"id":1057,"depth":4342,"text":312},{"id":1319,"depth":4342,"text":9255},"状態を読む：useDnD",{"id":1599,"depth":4342,"text":134},{"id":1940,"depth":4342,"text":138},{"id":2139,"depth":4342,"text":2140},{"id":2405,"depth":4342,"text":1053},{"id":574,"depth":4342,"text":1686},{"id":2801,"depth":4342,"text":336},{"id":3059,"depth":4342,"text":3060},{"id":3238,"depth":4342,"text":3239},{"id":3353,"depth":4342,"text":3354},{"id":3472,"depth":4342,"text":3473},{"id":3603,"depth":4342,"text":1591},{"id":3888,"depth":4342,"text":3889},{"id":4104,"depth":4342,"text":4105},{"id":4273,"depth":4316,"text":4274,"children":9270},[9271,9272,9273,9274,9275],{"id":4277,"depth":4342,"text":4278},{"id":5456,"depth":4342,"text":320},{"id":6578,"depth":4342,"text":324},{"id":7607,"depth":4342,"text":7608},{"id":8362,"depth":4342,"text":8363},{"id":9043,"depth":4316,"text":9044},"v2 のアプリを v3 へ移行します。何がなぜ変わったか、アップグレードの手順、v2 のすべての API と v3 での置き換え先の対応表、よくあるケースの移行前後のコード、そして注意点。","md",null,{"source":9281},"ac4ad39457",{"icon":34},{"title":302,"description":9277},"powBHDq-8xtiGzIc9Q9tAWwtTra3FBkRQK3m3LTsafU",[9286,9288],{"title":298,"path":299,"stem":300,"description":9287,"icon":29},"3 つのファイルで作る並べ替え可能なリスト。プロバイダー、リスト、そしてその行です。",{"title":312,"path":313,"stem":314,"description":9289,"icon":46},"DnDProvider は配下のすべてのドラッグを管理します。ターゲットを見つけ、ドラッグを開始し、スクロールし、起きたことをすべて useDnD と useDnDMonitor に伝えます。",1793707551522]