[{"data":1,"prerenderedAt":1686},["ShallowReactive",2],{"navigation-source":3,"navigation-zh":271,"docs-\u002Fzh\u002Fdocs\u002Fguides\u002Fdevtools":474,"docs-surround-\u002Fzh\u002Fdocs\u002Fguides\u002Fdevtools":1681},[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":113,"body":477,"category":306,"description":1673,"extension":1674,"links":1675,"meta":1676,"navigation":1678,"path":368,"seo":1679,"stem":369,"__hash__":1680},"docs_zh\u002Fzh\u002Fdocs\u002F2.guides\u002F15.devtools.md",{"type":478,"value":479,"toc":1656},"minimark",[480,497,500,504,509,540,546,550,743,762,773,777,788,792,799,920,939,957,961,1006,1012,1016,1095,1098,1102,1105,1127,1130,1134,1147,1167,1177,1258,1262,1268,1409,1412,1416,1419,1443,1446,1450,1453,1550,1567,1571,1574,1641,1645,1652],[481,482,483,487,488,491,492,496],"p",{},[484,485,486],"code",{},"@vue-dnd-kit\u002Fdevtools"," 在 Vue DevTools（",[484,489,490],{},"vite-plugin-vue-devtools","）和 Nuxt DevTools 中添加一个 ",[493,494,495],"strong",{},"Vue DnD Kit"," 标签页。它在实时小地图中显示页面上的每个列表、树和放置目标，用摇杆拖拽任意项，在应用运行时编辑选项，并记录每次拖拽做了什么。它只在开发环境中工作：它的任何部分都不会进入生产构建。",[481,498,499],{},"这个标签页是一个独立的页面，由你的开发服务器在你的应用旁边提供，所以无法在本文档中运行。三步即可完成设置。",[501,502,294],"h2",{"id":503},"install",[505,506,508],"h3",{"id":507},"_1-add-the-packages","1. 添加包",[510,511,516],"pre",{"className":512,"code":513,"language":514,"meta":515,"style":515},"language-bash shiki shiki-themes dnd-light dnd-light dnd-dark","npm i -D @vue-dnd-kit\u002Fdevtools @vue-dnd-kit\u002Factions\n","bash","",[484,517,518],{"__ignoreMap":515},[519,520,523,527,531,534,537],"span",{"class":521,"line":522},"line",1,[519,524,526],{"class":525},"sbwC8","npm",[519,528,530],{"class":529},"sN8r7"," i",[519,532,533],{"class":529}," -D",[519,535,536],{"class":529}," @vue-dnd-kit\u002Fdevtools",[519,538,539],{"class":529}," @vue-dnd-kit\u002Factions\n",[481,541,542,545],{},[484,543,544],{},"@vue-dnd-kit\u002Factions"," 是一个对等依赖：标签页中的移动都通过它进行。npm 7+ 和 pnpm 会自动安装它；使用 Yarn 1 时需要手动添加。",[505,547,549],{"id":548},"_2-add-the-plugin","2. 添加插件",[551,552,553,702],"code-group",{},[510,554,559],{"className":555,"code":556,"filename":557,"language":558,"meta":515,"style":515},"language-ts shiki shiki-themes dnd-light dnd-light dnd-dark","import { defineConfig } from 'vite';\nimport vue from '@vitejs\u002Fplugin-vue';\nimport vueDevTools from 'vite-plugin-vue-devtools';\nimport { vueDnDKitDevtools } from '@vue-dnd-kit\u002Fdevtools\u002Fvite';\n\nexport default defineConfig({\n  \u002F\u002F Next to the Vue DevTools plugin: the tab joins its sidebar.\n  plugins: [vueDevTools(), vueDnDKitDevtools(), vue()],\n});\n","vite.config.ts","ts",[484,560,561,587,603,618,637,644,659,666,696],{"__ignoreMap":515},[519,562,563,567,571,575,578,581,584],{"class":521,"line":522},[519,564,566],{"class":565},"s78Kj","import",[519,568,570],{"class":569},"s6cML"," {",[519,572,574],{"class":573},"snmWg"," defineConfig ",[519,576,577],{"class":569},"}",[519,579,580],{"class":565}," from",[519,582,583],{"class":529}," 'vite'",[519,585,586],{"class":569},";\n",[519,588,590,592,595,598,601],{"class":521,"line":589},2,[519,591,566],{"class":565},[519,593,594],{"class":573}," vue ",[519,596,597],{"class":565},"from",[519,599,600],{"class":529}," '@vitejs\u002Fplugin-vue'",[519,602,586],{"class":569},[519,604,606,608,611,613,616],{"class":521,"line":605},3,[519,607,566],{"class":565},[519,609,610],{"class":573}," vueDevTools ",[519,612,597],{"class":565},[519,614,615],{"class":529}," 'vite-plugin-vue-devtools'",[519,617,586],{"class":569},[519,619,621,623,625,628,630,632,635],{"class":521,"line":620},4,[519,622,566],{"class":565},[519,624,570],{"class":569},[519,626,627],{"class":573}," vueDnDKitDevtools ",[519,629,577],{"class":569},[519,631,580],{"class":565},[519,633,634],{"class":529}," '@vue-dnd-kit\u002Fdevtools\u002Fvite'",[519,636,586],{"class":569},[519,638,640],{"class":521,"line":639},5,[519,641,643],{"emptyLinePlaceholder":642},true,"\n",[519,645,647,650,653,656],{"class":521,"line":646},6,[519,648,649],{"class":565},"export",[519,651,652],{"class":565}," default",[519,654,655],{"class":525}," defineConfig",[519,657,658],{"class":569},"({\n",[519,660,662],{"class":521,"line":661},7,[519,663,665],{"class":664},"sytrG","  \u002F\u002F Next to the Vue DevTools plugin: the tab joins its sidebar.\n",[519,667,669,673,676,679,682,685,688,690,693],{"class":521,"line":668},8,[519,670,672],{"class":671},"sVvmN","  plugins",[519,674,675],{"class":569},":",[519,677,678],{"class":569}," [",[519,680,681],{"class":525},"vueDevTools",[519,683,684],{"class":569},"(),",[519,686,687],{"class":525}," vueDnDKitDevtools",[519,689,684],{"class":569},[519,691,692],{"class":525}," vue",[519,694,695],{"class":569},"()],\n",[519,697,699],{"class":521,"line":698},9,[519,700,701],{"class":569},"});\n",[510,703,706],{"className":555,"code":704,"filename":705,"language":558,"meta":515,"style":515},"export default defineNuxtConfig({\n  \u002F\u002F With @vue-dnd-kit\u002Fdevtools installed, the tab appears in development.\n  modules: ['@vue-dnd-kit\u002Fnuxt'],\n});\n","nuxt.config.ts",[484,707,708,719,724,739],{"__ignoreMap":515},[519,709,710,712,714,717],{"class":521,"line":522},[519,711,649],{"class":565},[519,713,652],{"class":565},[519,715,716],{"class":525}," defineNuxtConfig",[519,718,658],{"class":569},[519,720,721],{"class":521,"line":589},[519,722,723],{"class":664},"  \u002F\u002F With @vue-dnd-kit\u002Fdevtools installed, the tab appears in development.\n",[519,725,726,729,731,733,736],{"class":521,"line":605},[519,727,728],{"class":671},"  modules",[519,730,675],{"class":569},[519,732,678],{"class":569},[519,734,735],{"class":529},"'@vue-dnd-kit\u002Fnuxt'",[519,737,738],{"class":569},"],\n",[519,740,741],{"class":521,"line":620},[519,742,701],{"class":569},[481,744,745,746,749,750,753,754,757,758,761],{},"使用 Vite 时，插件在开发服务器（",[484,747,748],{},"vite serve","）上做三件事：在 ",[484,751,752],{},"\u002F__vue-dnd-kit-devtools\u002F","（位于你的 ",[484,755,756],{},"base"," 之下）提供标签页，把它添加到 Vue DevTools 中，并让页面在你的应用启动之前向它报告。不需要 ",[484,759,760],{},"app.use()","，构建也不受影响。",[481,763,764,765,768,769,772],{},"使用 Nuxt 时，",[484,766,767],{},"@vue-dnd-kit\u002Fnuxt"," 模块会找到这个包，提供标签页，把它添加到 Nuxt DevTools 中，并通过一个客户端插件安装页面一侧的部分。",[484,770,771],{},"vueDndKit: { devtools: false }"," 关闭它。",[505,774,776],{"id":775},"_3-run-the-app-in-development","3. 在开发环境中运行应用",[481,778,779,780,783,784,787],{},"像往常一样启动开发服务器（",[484,781,782],{},"vite","、",[484,785,786],{},"nuxt dev","）并打开应用：标签页就绪。页面上的每个 provider 都会显示在其中，无论它在哪个应用中渲染。",[505,789,791],{"id":790},"without-the-plugins","不使用插件",[481,793,794,795,798],{},"对于你自己的开发服务器，或者不是由 Vite 从 ",[484,796,797],{},"index.html"," 提供的页面（SSR 配置），自己安装页面一侧的部分：",[510,800,803],{"className":555,"code":801,"filename":802,"language":558,"meta":515,"style":515},"import { createApp } from 'vue';\nimport { DnDDevtools } from '@vue-dnd-kit\u002Fdevtools';\nimport App from '.\u002FApp.vue';\n\nconst app = createApp(App);\napp.use(DnDDevtools); \u002F\u002F before mount: providers set up earlier aren't seen\napp.mount('#app');\n","main.ts",[484,804,805,823,841,855,859,882,904],{"__ignoreMap":515},[519,806,807,809,811,814,816,818,821],{"class":521,"line":522},[519,808,566],{"class":565},[519,810,570],{"class":569},[519,812,813],{"class":573}," createApp ",[519,815,577],{"class":569},[519,817,580],{"class":565},[519,819,820],{"class":529}," 'vue'",[519,822,586],{"class":569},[519,824,825,827,829,832,834,836,839],{"class":521,"line":589},[519,826,566],{"class":565},[519,828,570],{"class":569},[519,830,831],{"class":573}," DnDDevtools ",[519,833,577],{"class":569},[519,835,580],{"class":565},[519,837,838],{"class":529}," '@vue-dnd-kit\u002Fdevtools'",[519,840,586],{"class":569},[519,842,843,845,848,850,853],{"class":521,"line":605},[519,844,566],{"class":565},[519,846,847],{"class":573}," App ",[519,849,597],{"class":565},[519,851,852],{"class":529}," '.\u002FApp.vue'",[519,854,586],{"class":569},[519,856,857],{"class":521,"line":620},[519,858,643],{"emptyLinePlaceholder":642},[519,860,861,864,867,870,873,876,879],{"class":521,"line":639},[519,862,863],{"class":565},"const",[519,865,866],{"class":573}," app ",[519,868,869],{"class":569},"=",[519,871,872],{"class":525}," createApp",[519,874,875],{"class":569},"(",[519,877,878],{"class":573},"App",[519,880,881],{"class":569},");\n",[519,883,884,887,890,893,895,898,901],{"class":521,"line":646},[519,885,886],{"class":525},"app",[519,888,889],{"class":569},".",[519,891,892],{"class":525},"use",[519,894,875],{"class":569},[519,896,897],{"class":573},"DnDDevtools",[519,899,900],{"class":569},");",[519,902,903],{"class":664}," \u002F\u002F before mount: providers set up earlier aren't seen\n",[519,905,906,908,910,913,915,918],{"class":521,"line":661},[519,907,886],{"class":525},[519,909,889],{"class":569},[519,911,912],{"class":525},"mount",[519,914,875],{"class":569},[519,916,917],{"class":529},"'#app'",[519,919,881],{"class":569},[481,921,922,923,926,927,930,931,934,935,938],{},"或者在入口文件中最先导入 ",[484,924,925],{},"@vue-dnd-kit\u002Fdevtools\u002Fauto","。如果希望插件提供标签页，但页面一侧由你自己安装，使用 ",[484,928,929],{},"vueDnDKitDevtools({ inject: false })","；",[484,932,933],{},"@vue-dnd-kit\u002Fdevtools\u002Fvite"," 中的 ",[484,936,937],{},"serveTab()"," 就是提供标签页的中间件。",[940,941,942],"note",{},[481,943,944,945,948,949,952,953,956],{},"在生产构建中，",[484,946,947],{},"app.use(DnDDevtools)"," 和 ",[484,950,951],{},"auto"," 导入几乎缩减为零：每个入口点都会先检查 ",[484,954,955],{},"process.env.NODE_ENV","，打包工具会去掉其余部分。在服务端它们什么都不做。",[501,958,960],{"id":959},"open-it","打开它",[962,963,964,983,996],"ul",{},[965,966,967,970,971,975,976,979,980,982],"li",{},[493,968,969],{},"Vue DevTools","：:kbd{value=\"Alt\"} + ",[972,973],"kbd",{"value":974},"Shift"," + ",[972,977],{"value":978},"D","，或页面底部的 Vue 按钮，然后选择 ",[493,981,495],{}," 标签页。",[965,984,985,970,988,975,990,992,993,995],{},[493,986,987],{},"Nuxt DevTools",[972,989],{"value":974},[972,991],{"value":978},"，或 Nuxt 按钮，然后选择 ",[493,994,495],{},"（在侧边栏或它的溢出菜单中）。",[965,997,998,1001,1002,1005],{},[493,999,1000],{},"独立窗口","：在你的开发服务器上打开 ",[484,1003,1004],{},"http:\u002F\u002Flocalhost:5173\u002F__vue-dnd-kit-devtools\u002F","，或点击标签页的 ⧉ 按钮。在第二块屏幕上很方便。打开了多个页面时，顶部的下拉框可以选择要观察的那个。",[1007,1008,1009],"warning",{},[481,1010,1011],{},"把标签页放在单独的窗口中，而不是同一窗口中的后台浏览器标签页：页面必须保持可见，隐藏的页面会取消拖拽。",[501,1013,1015],{"id":1014},"the-tab-at-a-glance","标签页一览",[1017,1018,1019,1032],"table",{},[1020,1021,1022],"thead",{},[1023,1024,1025,1029],"tr",{},[1026,1027,1028],"th",{},"部分",[1026,1030,1031],{},"内容",[1033,1034,1035,1052,1064,1078],"tbody",{},[1023,1036,1037,1041],{},[1038,1039,1040],"td",{},"顶栏",[1038,1042,1043,1044,1047,1048,1051],{},"拖拽此刻正在做什么（",[484,1045,1046],{},"dragging card-3 → done (accepts)","）、被观察的页面、",[493,1049,1050],{},"⌖ Pick","、已编辑选项的数量及重置按钮、⧉（独立窗口）以及主题。",[1023,1053,1054,1057],{},[1038,1055,1056],{},"左侧：注册表",[1038,1058,1059,1060,1063],{},"以树的形式显示每个 provider：它的列表、树、放置目标和可拖拽元素。",[493,1061,1062],{},"☰"," 显示或隐藏它。",[1023,1065,1066,1075],{},[1038,1067,1068,1069,948,1072],{},"中间：",[493,1070,1071],{},"Map",[493,1073,1074],{},"Log",[1038,1076,1077],{},"页面的实时小地图，或拖拽日志。",[1023,1079,1080,1092],{},[1038,1081,1082,1083,783,1086,783,1089],{},"右侧：",[493,1084,1085],{},"Drive",[493,1087,1088],{},"Options",[493,1090,1091],{},"State",[1038,1093,1094],{},"摇杆和移动按钮、所选节点的选项，以及 provider 对它所知的信息。",[481,1096,1097],{},"在注册表中选择一个节点，或在地图上选择一个项，右侧就会跟随它。",[501,1099,1101],{"id":1100},"the-mini-map","小地图",[481,1103,1104],{},"每个列表、树和放置目标都有一张实时卡片，其中的项的副本位于它们所在的位置——与浮层会显示的克隆相同，并带有页面的 CSS。拖拽期间它会标出：",[962,1106,1107,1117,1120],{},[965,1108,1109,1112,1113,1116],{},[493,1110,1111],{},"接收","该拖拽（蓝色）或",[493,1114,1115],{},"拒绝","该拖拽（红色）的列表和目标；",[965,1118,1119],{},"占位元素，以及指针下方的目标；",[965,1121,1122,1123,1126],{},"指针、浮层的盒子，以及 ",[484,1124,1125],{},"placeholder: 'indicator'"," 列表的插入线。",[481,1128,1129],{},"单击会选中一个项并在页面上高亮它；双击会把页面滚动到它那里。当放置没有到达你预期的地方时，使用地图：它一眼就能看出哪些列表接收这次拖拽。",[501,1131,1133],{"id":1132},"drive-the-joystick","Drive：摇杆",[481,1135,1136,1137,1139,1140,948,1143,1146],{},"选择一个项——在地图上、在注册表中，或用 ",[493,1138,1050],{},"，它会接管页面上对可拖拽元素的下一次按下，而不让按下产生作用——然后推动摇杆的旋钮。项被拿起并朝那个方向移动，旋钮离中心越远，移动越快。松开它就停下；",[493,1141,1142],{},"Drop",[493,1144,1145],{},"Cancel"," 结束拖拽。",[481,1148,1149,1150,1153,1154,1159,1160,948,1163,1166],{},"这是一个名为 ",[484,1151,1152],{},"devtools"," 的传感器发起的真正的指针拖拽，基于公开的",[1155,1156,1158],"a",{"href":1157},"\u002Fdocs\u002Fguides\u002Fsensors#a-sensor-of-your-own","传感器 API"," 实现：列表在它下方排序，容器在边缘自动滚动，",[484,1161,1162],{},"onBeforeDrop",[484,1164,1165],{},"onDrop"," 像任何拖拽一样运行。禁用的项不会被拿起。页面发起的键盘拖拽也可以操控。",[481,1168,1169,1170,1176],{},"可排序列表的项还有按钮：上移、下移、移到开头、移到末尾、移到同一分组的另一个列表。每个按钮都是一次 ",[1155,1171,1173],{"href":1172},"\u002Fdocs\u002Fguides\u002Fsensors#programmatic-drags",[484,1174,1175],{},"moveItem"," 键盘拖拽。摇杆下方是浮层所显示内容的一个放大副本。",[1017,1178,1179,1189],{},[1020,1180,1181],{},[1023,1182,1183,1186],{},[1026,1184,1185],{},"按键（在标签页中）",[1026,1187,1188],{},"作用",[1033,1190,1191,1214,1224,1238,1248],{},[1023,1192,1193,1208],{},[1038,1194,1195,1196,1199,1200,1199,1203,1199,1206],{},"方向键或 ",[972,1197],{"value":1198},"W"," ",[972,1201],{"value":1202},"A",[972,1204],{"value":1205},"S",[972,1207],{"value":978},[1038,1209,1210,1211,1213],{},"把旋钮朝那个方向推到一半；按住 ",[972,1212],{"value":974}," 时推到底",[1023,1215,1216,1221],{},[1038,1217,1218],{},[972,1219],{"value":1220},"G",[1038,1222,1223],{},"拿起所选的项",[1023,1225,1226,1235],{},[1038,1227,1228,1231,1232],{},[972,1229],{"value":1230},"Space"," \u002F ",[972,1233],{"value":1234},"Enter",[1038,1236,1237],{},"放下",[1023,1239,1240,1245],{},[1038,1241,1242],{},[972,1243],{"value":1244},"Escape",[1038,1246,1247],{},"取消",[1023,1249,1250,1255],{},[1038,1251,1252],{},[972,1253],{"value":1254},"P",[1038,1256,1257],{},"在页面上选取",[501,1259,1261],{"id":1260},"options","选项",[481,1263,1264,1265,1267],{},"所有不是回调的选项都可以在应用运行时编辑。选择节点并打开 ",[493,1266,1088],{},"：",[1017,1269,1270,1279],{},[1020,1271,1272],{},[1023,1273,1274,1277],{},[1026,1275,1276],{},"节点",[1026,1278,1261],{},[1033,1280,1281,1322,1361,1378,1395],{},[1023,1282,1283,1285],{},[1038,1284,312],{},[1038,1286,1287,783,1290,783,1293,783,1296,1299,1300,783,1303,783,1306,783,1309,783,1312,783,1315,783,1318,1321],{},[484,1288,1289],{},"overlayFit",[484,1291,1292],{},"autoScroll",[484,1294,1295],{},"collision",[484,1297,1298],{},"modifiers","（库自带的，按名称）、",[484,1301,1302],{},"animation",[484,1304,1305],{},"dropAnimation",[484,1307,1308],{},"animateChanges",[484,1310,1311],{},"activation",[484,1313,1314],{},"keyboard",[484,1316,1317],{},"haptics",[484,1319,1320],{},"copyModifier","……",[1023,1323,1324,1327],{},[1038,1325,1326],{},"列表",[1038,1328,1329,783,1332,783,1335,783,1338,783,1341,783,1344,783,1347,783,1350,783,1353,783,1355,783,1357,783,1359],{},[484,1330,1331],{},"disabled",[484,1333,1334],{},"strategy",[484,1336,1337],{},"placeholder",[484,1339,1340],{},"behavior",[484,1342,1343],{},"multiple",[484,1345,1346],{},"sort",[484,1348,1349],{},"dropOutside",[484,1351,1352],{},"acceptMode",[484,1354,1302],{},[484,1356,1308],{},[484,1358,1292],{},[484,1360,1298],{},[1023,1362,1363,1365],{},[1038,1364,328],{},[1038,1366,1367,783,1369,783,1372,783,1375,1321],{},[484,1368,1337],{},[484,1370,1371],{},"indentation",[484,1373,1374],{},"nesting",[484,1376,1377],{},"maxDepth",[1023,1379,1380,1383],{},[1038,1381,1382],{},"放置目标",[1038,1384,1385,783,1387,783,1390,783,1393],{},[484,1386,1331],{},[484,1388,1389],{},"priority",[484,1391,1392],{},"accept",[484,1394,1352],{},[1023,1396,1397,1400],{},[1038,1398,1399],{},"项",[1038,1401,1402,783,1404,783,1407],{},[484,1403,1331],{},[484,1405,1406],{},"keyboardMode",[484,1408,1311],{},[481,1410,1411],{},"编辑立即生效，只作用于当前页面，永远不会写入你的代码：库在读取选项的地方读取新值。它会一直有效，直到你重置它（每个选项旁的 ↺，或顶栏中的重置）、provider 卸载或页面重新加载。被编辑的选项旁边会显示你代码中的值。在编辑生效期间挂载的项——虚拟列表的行——也会获得它。",[501,1413,1415],{"id":1414},"state","状态",[481,1417,1418],{},"每个 provider 对你所选节点所知的信息：",[962,1420,1421,1427,1435],{},[965,1422,1423,1426],{},[493,1424,1425],{},"拖拽会话","：状态、当前的 id、项和传感器、目标及其是否接收、指针、浮层、可排序分组的会话和插入线；",[965,1428,1429,1431,1432,1434],{},[493,1430,1326],{},"：它的顺序和草稿；",[493,1433,328],{},"：它的行；",[965,1436,1437,1439,1440,1442],{},[493,1438,1399],{},"：它的类型、数据和位置；",[493,1441,1382],{},"：它的规则。",[481,1444,1445],{},"项的挂载和卸载没有事件：注册表会在一秒内跟上。",[501,1447,1449],{"id":1448},"log","日志",[481,1451,1452],{},"每次拖拽一个条带，按顺序排列：",[1017,1454,1455,1465],{},[1020,1456,1457],{},[1023,1458,1459,1462],{},[1026,1460,1461],{},"条目",[1026,1463,1464],{},"说明什么",[1033,1466,1467,1477,1490,1503,1515,1533],{},[1023,1468,1469,1474],{},[1038,1470,1471],{},[484,1472,1473],{},"drag start",[1038,1475,1476],{},"id、传感器以及是否由触摸发起、它来自的列表。",[1023,1478,1479,1487],{},[1038,1480,1481,783,1484],{},[484,1482,1483],{},"over",[484,1485,1486],{},"left",[1038,1488,1489],{},"进入和离开的每个目标，以及它是否接收。",[1023,1491,1492,1497],{},[1038,1493,1494],{},[484,1495,1496],{},"release",[1038,1498,1499,1500,1502],{},"在 ",[484,1501,1162],{}," 做决定期间，它被松开时所在的目标。",[1023,1504,1505,1509],{},[1038,1506,1507],{},[484,1508,1162],{},[1038,1510,1511,1512,1514],{},"裁决：已接受、部分接受、被钩子拒绝、被目标的 ",[484,1513,1392],{}," 拒绝，以及钩子花了多长时间。",[1023,1516,1517,1522],{},[1038,1518,1519],{},[484,1520,1521],{},"drop",[1038,1523,1524,1525,1528,1529,1532],{},"目标；对于可排序列表，还有这次移动、",[484,1526,1527],{},"e.result","，以及是否调用了 ",[484,1530,1531],{},"preventDefault()","。",[1023,1534,1535,1540],{},[1038,1536,1537],{},[484,1538,1539],{},"cancel",[1038,1541,1542,1543,1546,1547,1549],{},"原因：被取消（Escape、",[484,1544,1545],{},"cancel()","）、被钩子拒绝，或被目标的 ",[484,1548,1392],{}," 拒绝。",[481,1551,1552,1553,948,1556,783,1559,1562,1563,1566],{},"还有 ",[484,1554,1555],{},"auto-scroll on",[484,1557,1558],{},"off",[484,1560,1561],{},"announcement"," 文本（默认隐藏），以及拖拽之外的 ",[484,1564,1565],{},"animate","（非拖拽引起的列表项变化）。单击一个条目可以查看它的数据。后来打开的标签页会收到在此之前的拖拽。",[501,1568,1570],{"id":1569},"debug-a-drop-step-by-step","逐步调试一次放置",[481,1572,1573],{},"一张卡片放不进某一列。打开标签页：",[1575,1576,1577,1586,1604,1624],"ol",{},[965,1578,1579,1582,1583,1585],{},[493,1580,1581],{},"复现问题","，可以手动，也可以用 ",[493,1584,1085],{},"，这样你的手可以腾出来操作标签页。",[965,1587,1588,1589,1592,1593,1596,1597,1600,1601,1603],{},"卡片位于该列上方时",[493,1590,1591],{},"观察地图","。红色表示列表拒绝这张卡片：检查它的 ",[484,1594,1595],{},"group","（",[484,1598,1599],{},"put","）或目标的 ",[484,1602,1392],{},"。蓝色表示它接收，问题出在后面。",[965,1605,1606,1532,1609,1611,1612,1614,1615,1617,1618,1620,1621,1623],{},[493,1607,1608],{},"阅读那次拖拽的日志",[484,1610,1162],{}," 会说明是谁拒绝的——钩子，还是目标的 ",[484,1613,1392],{},"。如果放置完成了但你的数据没有变化，",[484,1616,1521],{}," 条目会说明是否调用了 ",[484,1619,1531],{}," 以及 ",[484,1622,1527],{}," 中有什么：受控列表必须自己应用它。",[965,1625,1499,1626,1628,1629,1632,1633,1635,1636,783,1638,1640],{},[493,1627,1088],{}," 中",[493,1630,1631],{},"实时尝试修复","——更宽松的 ",[484,1634,1352],{},"、另一种 ",[484,1637,1295],{},[484,1639,1125],{},"——然后把有效的那个写进你的代码。",[501,1642,1644],{"id":1643},"how-it-works","工作原理",[481,1646,1647,1648,1651],{},"provider 向页面一侧安装的一个钩子报告。在有标签页观察该页面之前，它们只是被记录下来；之后页面像任何监听器一样进行监听，并把标签页要显示的内容发送给它——拖拽期间每 40 ms 一次，其他时候每秒两次——在几秒钟内没有标签页观察时停止。标签页通过页面源的 ",[484,1649,1650],{},"BroadcastChannel"," 与页面通信。它只改变你要求的东西：拖拽、选中集合和选项覆盖。",[1653,1654,1655],"style",{},"html pre.shiki code .sbwC8, html code.shiki .sbwC8{--shiki-light:#0969DA;--shiki-default:#0969DA;--shiki-dark:#7CC4FF}html pre.shiki code .sN8r7, html code.shiki .sN8r7{--shiki-light:#9A6700;--shiki-default:#9A6700;--shiki-dark:#E9C46A}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s78Kj, html code.shiki .s78Kj{--shiki-light:#1F8A5B;--shiki-default:#1F8A5B;--shiki-dark:#42B883}html pre.shiki code .s6cML, html code.shiki .s6cML{--shiki-light:#5B5B63;--shiki-default:#5B5B63;--shiki-dark:#9F9FA9}html pre.shiki code .snmWg, html code.shiki .snmWg{--shiki-light:#27272A;--shiki-default:#27272A;--shiki-dark:#E4E4E7}html pre.shiki code .sytrG, html code.shiki .sytrG{--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-default:#85858D;--shiki-default-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic}html pre.shiki code .sVvmN, html code.shiki .sVvmN{--shiki-light:#7C4DCC;--shiki-default:#7C4DCC;--shiki-dark:#C3A6FF}",{"title":515,"searchDepth":605,"depth":605,"links":1657},[1658,1664,1665,1666,1667,1668,1669,1670,1671,1672],{"id":503,"depth":589,"text":294,"children":1659},[1660,1661,1662,1663],{"id":507,"depth":605,"text":508},{"id":548,"depth":605,"text":549},{"id":775,"depth":605,"text":776},{"id":790,"depth":605,"text":791},{"id":959,"depth":589,"text":960},{"id":1014,"depth":589,"text":1015},{"id":1100,"depth":589,"text":1101},{"id":1132,"depth":589,"text":1133},{"id":1260,"depth":589,"text":1261},{"id":1414,"depth":589,"text":1415},{"id":1448,"depth":589,"text":1449},{"id":1569,"depth":589,"text":1570},{"id":1643,"depth":589,"text":1644},"Vue DevTools 和 Nuxt DevTools 中的 Vue DnD Kit 标签页——实时小地图、能真正拖拽的摇杆、实时编辑选项，以及每次拖拽的日志。","md",null,{"source":1677},"6f7e373d0b",{"icon":116},{"title":113,"description":1673},"KHWbK9WF1ymPV_3YSKJPBk98Naai5T8KuXQPtUw5NOk",[1682,1684],{"title":364,"path":365,"stem":366,"description":1683,"icon":111},"输入如何变成拖拽——指针和键盘传感器、激活约束、canDrag、自定义传感器，以及用 @vue-dnd-kit\u002Factions 编写脚本驱动的拖拽。",{"title":371,"path":372,"stem":373,"description":1685,"icon":121},"浏览器自己的拖放，作为本库的拖拽运行——来自其他应用的文件、链接和文本拖进放置目标和为它们腾出位置的列表，被拖出页面的项，以及在你的应用的各个窗口之间拖拽。",1793707542512]