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