[{"data":1,"prerenderedAt":1699},["ShallowReactive",2],{"navigation-source":3,"navigation-pt":271,"docs-\u002Fpt\u002Fdocs\u002Fguides\u002Fdevtools":474,"docs-surround-\u002Fpt\u002Fdocs\u002Fguides\u002Fdevtools":1694},[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},"Pt","\u002Fpt","pt",[277],{"title":278,"source":279,"path":280,"stem":281,"children":282,"page":35},"Documentação","6556add362","\u002Fpt\u002Fdocs","pt\u002Fdocs",[283,305,374,430],{"title":284,"source":285,"icon":11,"path":286,"stem":287,"children":288,"page":35},"Primeiros passos","e345edbff3","\u002Fpt\u002Fdocs\u002Fgetting-started","pt\u002Fdocs\u002F1.getting-started",[289,293,297,301],{"title":290,"path":291,"stem":292,"icon":19},"Introdução","\u002Fpt\u002Fdocs\u002Fgetting-started\u002Fintroduction","pt\u002Fdocs\u002F1.getting-started\u002F1.introduction",{"title":294,"path":295,"stem":296,"icon":24},"Instalação","\u002Fpt\u002Fdocs\u002Fgetting-started\u002Finstallation","pt\u002Fdocs\u002F1.getting-started\u002F2.installation",{"title":298,"path":299,"stem":300,"icon":29},"Início rápido","\u002Fpt\u002Fdocs\u002Fgetting-started\u002Fquick-start","pt\u002Fdocs\u002F1.getting-started\u002F3.quick-start",{"title":302,"path":303,"stem":304,"icon":34},"Migrando da v2","\u002Fpt\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2","pt\u002Fdocs\u002F1.getting-started\u002F4.migrating-from-v2",{"title":306,"source":307,"icon":38,"path":308,"stem":309,"children":310,"page":35},"Guias","0338bbaa33","\u002Fpt\u002Fdocs\u002Fguides","pt\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},"O provider","\u002Fpt\u002Fdocs\u002Fguides\u002Fprovider","pt\u002Fdocs\u002F2.guides\u002F01.provider",{"title":316,"path":317,"stem":318,"icon":51},"Arrastar e soltar","\u002Fpt\u002Fdocs\u002Fguides\u002Fdrag-and-drop","pt\u002Fdocs\u002F2.guides\u002F02.drag-and-drop",{"title":320,"path":321,"stem":322,"icon":56},"Listas ordenáveis","\u002Fpt\u002Fdocs\u002Fguides\u002Fsortable-lists","pt\u002Fdocs\u002F2.guides\u002F03.sortable-lists",{"title":324,"path":325,"stem":326,"icon":61},"Listas que compartilham itens","\u002Fpt\u002Fdocs\u002Fguides\u002Fshared-lists","pt\u002Fdocs\u002F2.guides\u002F04.shared-lists",{"title":328,"path":329,"stem":330,"icon":66},"Árvores","\u002Fpt\u002Fdocs\u002Fguides\u002Ftrees","pt\u002Fdocs\u002F2.guides\u002F05.trees",{"title":332,"path":333,"stem":334,"icon":71},"Multi-drag e seleção","\u002Fpt\u002Fdocs\u002Fguides\u002Fmulti-drag","pt\u002Fdocs\u002F2.guides\u002F06.multi-drag",{"title":336,"path":337,"stem":338,"icon":76},"O overlay","\u002Fpt\u002Fdocs\u002Fguides\u002Foverlay","pt\u002Fdocs\u002F2.guides\u002F07.overlay",{"title":340,"path":341,"stem":342,"icon":81},"Eixos, limites e grades","\u002Fpt\u002Fdocs\u002Fguides\u002Fconstraints","pt\u002Fdocs\u002F2.guides\u002F08.constraints",{"title":344,"path":345,"stem":346,"icon":86},"Decidindo um drop","\u002Fpt\u002Fdocs\u002Fguides\u002Fdrop-decisions","pt\u002Fdocs\u002F2.guides\u002F09.drop-decisions",{"title":348,"path":349,"stem":350,"icon":91},"Animações","\u002Fpt\u002Fdocs\u002Fguides\u002Fanimations","pt\u002Fdocs\u002F2.guides\u002F10.animations",{"title":352,"path":353,"stem":354,"icon":96},"Acessibilidade","\u002Fpt\u002Fdocs\u002Fguides\u002Faccessibility","pt\u002Fdocs\u002F2.guides\u002F11.accessibility",{"title":356,"path":357,"stem":358,"icon":101},"Listas virtuais","\u002Fpt\u002Fdocs\u002Fguides\u002Fvirtual-lists","pt\u002Fdocs\u002F2.guides\u002F12.virtual-lists",{"title":360,"path":361,"stem":362,"icon":106},"Estilização","\u002Fpt\u002Fdocs\u002Fguides\u002Fstyling","pt\u002Fdocs\u002F2.guides\u002F13.styling",{"title":364,"path":365,"stem":366,"icon":111},"Sensores e arrastes programáticos","\u002Fpt\u002Fdocs\u002Fguides\u002Fsensors","pt\u002Fdocs\u002F2.guides\u002F14.sensors",{"title":113,"path":368,"stem":369,"icon":116},"\u002Fpt\u002Fdocs\u002Fguides\u002Fdevtools","pt\u002Fdocs\u002F2.guides\u002F15.devtools",{"title":371,"path":372,"stem":373,"icon":121},"Arquivos e outros apps","\u002Fpt\u002Fdocs\u002Fguides\u002Fnative","pt\u002Fdocs\u002F2.guides\u002F16.native",{"title":123,"source":375,"icon":124,"path":376,"stem":377,"children":378,"page":35},"5c96005c70","\u002Fpt\u002Fdocs\u002Fapi","pt\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},"\u002Fpt\u002Fdocs\u002Fapi\u002Fdnd-provider","pt\u002Fdocs\u002F3.api\u002F01.dnd-provider",{"title":134,"path":383,"stem":384,"icon":51},"\u002Fpt\u002Fdocs\u002Fapi\u002Fmake-draggable","pt\u002Fdocs\u002F3.api\u002F02.make-draggable",{"title":138,"path":386,"stem":387,"icon":141},"\u002Fpt\u002Fdocs\u002Fapi\u002Fmake-droppable","pt\u002Fdocs\u002F3.api\u002F03.make-droppable",{"title":143,"path":389,"stem":390,"icon":56},"\u002Fpt\u002Fdocs\u002Fapi\u002Fmake-sortable-list","pt\u002Fdocs\u002F3.api\u002F04.make-sortable-list",{"title":147,"path":392,"stem":393,"icon":150},"\u002Fpt\u002Fdocs\u002Fapi\u002Fmake-sortable-item","pt\u002Fdocs\u002F3.api\u002F05.make-sortable-item",{"title":152,"path":395,"stem":396,"icon":155},"\u002Fpt\u002Fdocs\u002Fapi\u002Fmake-sortable-tree","pt\u002Fdocs\u002F3.api\u002F06.make-sortable-tree",{"title":157,"path":398,"stem":399,"icon":160},"\u002Fpt\u002Fdocs\u002Fapi\u002Fmake-selection-area","pt\u002Fdocs\u002F3.api\u002F07.make-selection-area",{"title":162,"path":401,"stem":402,"icon":165},"\u002Fpt\u002Fdocs\u002Fapi\u002Fmake-drag-area","pt\u002Fdocs\u002F3.api\u002F08.make-drag-area",{"title":404,"path":405,"stem":406,"icon":170},"useDnD e monitores","\u002Fpt\u002Fdocs\u002Fapi\u002Fuse-dnd","pt\u002Fdocs\u002F3.api\u002F09.use-dnd",{"title":408,"path":409,"stem":410,"icon":29},"Eventos","\u002Fpt\u002Fdocs\u002Fapi\u002Fevents","pt\u002Fdocs\u002F3.api\u002F10.events",{"title":412,"path":413,"stem":414,"icon":179},"Modificadores e colisão","\u002Fpt\u002Fdocs\u002Fapi\u002Fmodifiers","pt\u002Fdocs\u002F3.api\u002F11.modifiers",{"title":416,"path":417,"stem":418,"icon":71},"DragPreview e props do overlay","\u002Fpt\u002Fdocs\u002Fapi\u002Fdrag-preview","pt\u002Fdocs\u002F3.api\u002F12.drag-preview",{"title":348,"path":420,"stem":421,"icon":187},"\u002Fpt\u002Fdocs\u002Fapi\u002Fanimations","pt\u002Fdocs\u002F3.api\u002F13.animations",{"title":423,"path":424,"stem":425,"icon":192},"Sensores","\u002Fpt\u002Fdocs\u002Fapi\u002Fsensors","pt\u002Fdocs\u002F3.api\u002F14.sensors",{"title":427,"path":428,"stem":429,"icon":197},"Tipos comuns","\u002Fpt\u002Fdocs\u002Fapi\u002Ftypes","pt\u002Fdocs\u002F3.api\u002F15.types",{"title":431,"path":432,"stem":433,"children":434,"icon":205,"source":473},"Exemplos","\u002Fpt\u002Fdocs\u002Fexamples","pt\u002Fdocs\u002F4.examples\u002F00.index",[435,437,441,445,449,453,457,461,465,469],{"title":436,"path":432,"stem":433,"icon":205},"Visão geral",{"title":438,"path":439,"stem":440,"icon":210},"Quadro de projeto","\u002Fpt\u002Fdocs\u002Fexamples\u002Fboard","pt\u002Fdocs\u002F4.examples\u002F01.board",{"title":442,"path":443,"stem":444,"icon":215},"Calendário semanal","\u002Fpt\u002Fdocs\u002Fexamples\u002Fcalendar","pt\u002Fdocs\u002F4.examples\u002F02.calendar",{"title":446,"path":447,"stem":448,"icon":220},"Gerenciador de arquivos","\u002Fpt\u002Fdocs\u002Fexamples\u002Ffile-manager","pt\u002Fdocs\u002F4.examples\u002F03.file-manager",{"title":450,"path":451,"stem":452,"icon":225},"Editor de blocos","\u002Fpt\u002Fdocs\u002Fexamples\u002Fblock-editor","pt\u002Fdocs\u002F4.examples\u002F04.block-editor",{"title":454,"path":455,"stem":456,"icon":230},"Xadrez","\u002Fpt\u002Fdocs\u002Fexamples\u002Fchess","pt\u002Fdocs\u002F4.examples\u002F05.chess",{"title":458,"path":459,"stem":460,"icon":235},"Construtor de formulários","\u002Fpt\u002Fdocs\u002Fexamples\u002Fform-builder","pt\u002Fdocs\u002F4.examples\u002F06.form-builder",{"title":462,"path":463,"stem":464,"icon":240},"Canvas de design","\u002Fpt\u002Fdocs\u002Fexamples\u002Fdesign-canvas","pt\u002Fdocs\u002F4.examples\u002F07.design-canvas",{"title":466,"path":467,"stem":468,"icon":245},"Construtor de páginas","\u002Fpt\u002Fdocs\u002Fexamples\u002Fpage-builder","pt\u002Fdocs\u002F4.examples\u002F08.page-builder",{"title":470,"path":471,"stem":472,"icon":250},"Tabela de dados","\u002Fpt\u002Fdocs\u002Fexamples\u002Fdata-table","pt\u002Fdocs\u002F4.examples\u002F09.data-table","bd60379aec",{"page":475,"fallback":35},{"id":476,"title":113,"body":477,"category":306,"description":1686,"extension":1687,"links":1688,"meta":1689,"navigation":1691,"path":368,"seo":1692,"stem":369,"__hash__":1693},"docs_pt\u002Fpt\u002Fdocs\u002F2.guides\u002F15.devtools.md",{"type":478,"value":479,"toc":1669},"minimark",[480,497,500,504,509,540,546,550,743,762,773,777,788,792,799,920,939,957,961,1010,1016,1020,1100,1103,1107,1110,1132,1135,1139,1152,1172,1182,1263,1267,1272,1415,1418,1422,1425,1456,1459,1462,1465,1562,1580,1584,1587,1654,1658,1665],[481,482,483,487,488,492,493,496],"p",{},[484,485,486],"code",{},"@vue-dnd-kit\u002Fdevtools"," adiciona uma aba ",[489,490,491],"strong",{},"Vue DnD Kit"," ao Vue DevTools (",[484,494,495],{},"vite-plugin-vue-devtools",")\ne ao Nuxt DevTools. Ela mostra todas as listas, árvores e alvos de drop da página em um minimapa ao\nvivo, arrasta qualquer item com um joystick, edita opções enquanto o app roda e registra o que cada\narraste fez. Ela só funciona em desenvolvimento: nada dela chega a um build de produção.",[481,498,499],{},"A aba é uma página própria, servida pelo seu servidor de desenvolvimento ao lado do seu app, então\nela não pode rodar dentro desta documentação. Três passos a configuram.",[501,502,294],"h2",{"id":503},"install",[505,506,508],"h3",{"id":507},"_1-add-the-packages","1. Adicione os pacotes",[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"," é uma peer dependency: os movimentos da aba passam por ele. O npm 7+ e o\npnpm o instalam sozinhos; com o Yarn 1, adicione-o.",[505,547,549],{"id":548},"_2-add-the-plugin","2. Adicione o plugin",[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],{},"Com o Vite, o plugin faz três coisas no servidor de desenvolvimento (",[484,747,748],{},"vite serve","): serve a aba em\n",[484,751,752],{},"\u002F__vue-dnd-kit-devtools\u002F"," (sob a sua ",[484,755,756],{},"base","), a adiciona ao Vue DevTools e faz a página se\nreportar a ela antes de o seu app começar. Nenhum ",[484,759,760],{},"app.use()"," é necessário, e os builds não são\nafetados.",[481,763,764,765,768,769,772],{},"Com o Nuxt, o módulo ",[484,766,767],{},"@vue-dnd-kit\u002Fnuxt"," encontra o pacote, serve a aba, a adiciona ao Nuxt\nDevTools e instala o lado da página com um plugin de cliente. ",[484,770,771],{},"vueDndKit: { devtools: false }"," a\ndesliga.",[505,774,776],{"id":775},"_3-run-the-app-in-development","3. Rode o app em desenvolvimento",[481,778,779,780,783,784,787],{},"Inicie o servidor de desenvolvimento como sempre (",[484,781,782],{},"vite",", ",[484,785,786],{},"nuxt dev",") e abra o app: a aba está\npronta. Todo provider da página aparece nela, seja qual for o app em que ele é renderizado.",[505,789,791],{"id":790},"without-the-plugins","Sem os plugins",[481,793,794,795,798],{},"Para um servidor de desenvolvimento seu, ou uma página que o Vite não serve a partir de um\n",[484,796,797],{},"index.html"," (configurações de SSR), instale o lado da página você mesmo:",[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],{},"Ou importe ",[484,924,925],{},"@vue-dnd-kit\u002Fdevtools\u002Fauto"," primeiro no arquivo de entrada. Use\n",[484,928,929],{},"vueDnDKitDevtools({ inject: false })"," quando o plugin deve servir a aba, mas você instala o lado da\npágina você mesmo; ",[484,932,933],{},"serveTab()"," de ",[484,936,937],{},"@vue-dnd-kit\u002Fdevtools\u002Fvite"," é o middleware que serve a aba.",[940,941,942],"note",{},[481,943,944,945,948,949,952,953,956],{},"Em um build de produção, ",[484,946,947],{},"app.use(DnDDevtools)"," e o import ",[484,950,951],{},"auto"," encolhem para quase nada: todo\nponto de entrada verifica ",[484,954,955],{},"process.env.NODE_ENV"," primeiro, e os bundlers descartam o resto. No\nservidor, eles não fazem nada.",[501,958,960],{"id":959},"open-it","Abrir a aba",[962,963,964,985,1000],"ul",{},[965,966,967,970,971,975,976,975,979,982,983,889],"li",{},[489,968,969],{},"Vue DevTools",": ",[972,973],"kbd",{"value":974},"Alt"," + ",[972,977],{"value":978},"Shift",[972,980],{"value":981},"D",", ou o botão do Vue no\nrodapé da página, depois a aba ",[489,984,491],{},[965,986,987,970,990,975,992,975,994,996,997,999],{},[489,988,989],{},"Nuxt DevTools",[972,991],{"value":974},[972,993],{"value":978},[972,995],{"value":981},", ou o botão do Nuxt,\ndepois ",[489,998,491],{}," (na barra lateral ou no menu de itens extras dela).",[965,1001,1002,1005,1006,1009],{},[489,1003,1004],{},"Uma janela própria",": abra ",[484,1007,1008],{},"http:\u002F\u002Flocalhost:5173\u002F__vue-dnd-kit-devtools\u002F"," no seu servidor de\ndesenvolvimento, ou o botão ⧉ da aba. Prático em um segundo monitor. Com várias páginas abertas,\num seletor no topo escolhe qual observar.",[1011,1012,1013],"warning",{},[481,1014,1015],{},"Mantenha a aba em uma janela própria, não em uma aba de navegador em segundo plano da mesma janela:\na página precisa continuar visível, e uma página escondida cancela os arrastes.",[501,1017,1019],{"id":1018},"the-tab-at-a-glance","A aba em resumo",[1021,1022,1023,1036],"table",{},[1024,1025,1026],"thead",{},[1027,1028,1029,1033],"tr",{},[1030,1031,1032],"th",{},"Parte",[1030,1034,1035],{},"O que contém",[1037,1038,1039,1056,1068,1083],"tbody",{},[1027,1040,1041,1045],{},[1042,1043,1044],"td",{},"Barra superior",[1042,1046,1047,1048,1051,1052,1055],{},"O que o arraste está fazendo agora (",[484,1049,1050],{},"dragging card-3 → done (accepts)","), a página observada, ",[489,1053,1054],{},"⌖ Pick",", a contagem de opções editadas com um reset, ⧉ (uma janela própria) e o tema.",[1027,1057,1058,1061],{},[1042,1059,1060],{},"Esquerda: o registro",[1042,1062,1063,1064,1067],{},"Todo provider como uma árvore: as listas, árvores, alvos de drop e draggables dele. ",[489,1065,1066],{},"☰"," o mostra ou esconde.",[1027,1069,1070,1080],{},[1042,1071,1072,1073,1076,1077],{},"Meio: ",[489,1074,1075],{},"Map"," e ",[489,1078,1079],{},"Log",[1042,1081,1082],{},"O minimapa ao vivo da página, ou o log dos arrastes.",[1027,1084,1085,1097],{},[1042,1086,1087,1088,783,1091,783,1094],{},"Direita: ",[489,1089,1090],{},"Drive",[489,1092,1093],{},"Options",[489,1095,1096],{},"State",[1042,1098,1099],{},"O joystick e os botões de mover, as opções do nó escolhido, e o que o provider sabe sobre ele.",[481,1101,1102],{},"Escolha um nó no registro ou um item no mapa, e o lado direito o acompanha.",[501,1104,1106],{"id":1105},"the-mini-map","O minimapa",[481,1108,1109],{},"Um card ao vivo por lista, árvore e alvo de drop, com cópias dos itens deles onde estão — os mesmos\nclones que o overlay mostraria, com o CSS da página. Durante um arraste, ele marca:",[962,1111,1112,1123,1126],{},[965,1113,1114,1115,1118,1119,1122],{},"as listas e os alvos que ",[489,1116,1117],{},"aceitam"," o arraste (azul) ou o ",[489,1120,1121],{},"recusam"," (vermelho);",[965,1124,1125],{},"o placeholder, e o alvo sob o ponteiro;",[965,1127,1128,1129,889],{},"o ponteiro, a caixa do overlay e a linha de inserção das listas com ",[484,1130,1131],{},"placeholder: 'indicator'",[481,1133,1134],{},"Um clique escolhe um item e o destaca na página; um clique duplo rola a página até ele. Use o mapa\nquando um drop não vai para onde você espera: ele mostra de relance quais listas aceitam o arraste.",[501,1136,1138],{"id":1137},"drive-the-joystick","Drive: o joystick",[481,1140,1141,1142,1144,1145,1076,1148,1151],{},"Escolha um item — no mapa, no registro ou com ",[489,1143,1054],{},", que captura a próxima pressão em um\ndraggable da página em vez de deixá-la agir — e empurre a alavanca do joystick. O item é pego e se\nmove naquela direção, mais rápido quanto mais longe a alavanca estiver do centro. Solte e ele\npara; ",[489,1146,1147],{},"Drop",[489,1149,1150],{},"Cancel"," encerram o arraste.",[481,1153,1154,1155,1158,1159,1164,1165,1076,1168,1171],{},"É um arraste por ponteiro de verdade de um sensor chamado ",[484,1156,1157],{},"devtools",", feito com a\n",[1160,1161,1163],"a",{"href":1162},"\u002Fdocs\u002Fguides\u002Fsensors#a-sensor-of-your-own","API pública de sensores",": as listas ordenam sob ele, os\ncontêineres rolam automaticamente nas bordas, e ",[484,1166,1167],{},"onBeforeDrop",[484,1169,1170],{},"onDrop"," rodam como em qualquer\narraste. Itens desativados não são pegos. Um arraste por teclado iniciado pela página também pode\nser conduzido.",[481,1173,1174,1175,1181],{},"Os itens de listas ordenáveis também ganham botões: para cima, para baixo, para o início, para o\nfim, para outra lista do grupo. Cada um é um arraste por teclado de\n",[1160,1176,1178],{"href":1177},"\u002Fdocs\u002Fguides\u002Fsensors#programmatic-drags",[484,1179,1180],{},"moveItem",". Embaixo do joystick, uma cópia grande do que o\noverlay mostra.",[1021,1183,1184,1194],{},[1024,1185,1186],{},[1027,1187,1188,1191],{},[1030,1189,1190],{},"Tecla, na aba",[1030,1192,1193],{},"Faz",[1037,1195,1196,1219,1229,1243,1253],{},[1027,1197,1198,1213],{},[1042,1199,1200,1201,1204,1205,1204,1208,1204,1211],{},"Setas ou ",[972,1202],{"value":1203},"W"," ",[972,1206],{"value":1207},"A",[972,1209],{"value":1210},"S",[972,1212],{"value":981},[1042,1214,1215,1216,1218],{},"Empurra a alavanca naquela direção, até a metade; com ",[972,1217],{"value":978},", até o fim",[1027,1220,1221,1226],{},[1042,1222,1223],{},[972,1224],{"value":1225},"G",[1042,1227,1228],{},"Pega o item escolhido",[1027,1230,1231,1240],{},[1042,1232,1233,1236,1237],{},[972,1234],{"value":1235},"Space"," \u002F ",[972,1238],{"value":1239},"Enter",[1042,1241,1242],{},"Solta",[1027,1244,1245,1250],{},[1042,1246,1247],{},[972,1248],{"value":1249},"Escape",[1042,1251,1252],{},"Cancela",[1027,1254,1255,1260],{},[1042,1256,1257],{},[972,1258],{"value":1259},"P",[1042,1261,1262],{},"Escolhe na página",[501,1264,1266],{"id":1265},"options","Opções",[481,1268,1269,1270,675],{},"Toda opção que não é um callback pode ser editada enquanto o app roda. Escolha o nó e abra\n",[489,1271,1093],{},[1021,1273,1274,1283],{},[1024,1275,1276],{},[1027,1277,1278,1281],{},[1030,1279,1280],{},"Nó",[1030,1282,1266],{},[1037,1284,1285,1327,1366,1384,1401],{},[1027,1286,1287,1290],{},[1042,1288,1289],{},"Provider",[1042,1291,1292,783,1295,783,1298,783,1301,1304,1305,783,1308,783,1311,783,1314,783,1317,783,1320,783,1323,1326],{},[484,1293,1294],{},"overlayFit",[484,1296,1297],{},"autoScroll",[484,1299,1300],{},"collision",[484,1302,1303],{},"modifiers"," (os da biblioteca, pelo nome), ",[484,1306,1307],{},"animation",[484,1309,1310],{},"dropAnimation",[484,1312,1313],{},"animateChanges",[484,1315,1316],{},"activation",[484,1318,1319],{},"keyboard",[484,1321,1322],{},"haptics",[484,1324,1325],{},"copyModifier","…",[1027,1328,1329,1332],{},[1042,1330,1331],{},"Lista",[1042,1333,1334,783,1337,783,1340,783,1343,783,1346,783,1349,783,1352,783,1355,783,1358,783,1360,783,1362,783,1364],{},[484,1335,1336],{},"disabled",[484,1338,1339],{},"strategy",[484,1341,1342],{},"placeholder",[484,1344,1345],{},"behavior",[484,1347,1348],{},"multiple",[484,1350,1351],{},"sort",[484,1353,1354],{},"dropOutside",[484,1356,1357],{},"acceptMode",[484,1359,1307],{},[484,1361,1313],{},[484,1363,1297],{},[484,1365,1303],{},[1027,1367,1368,1371],{},[1042,1369,1370],{},"Árvore",[1042,1372,1373,783,1375,783,1378,783,1381,1326],{},[484,1374,1342],{},[484,1376,1377],{},"indentation",[484,1379,1380],{},"nesting",[484,1382,1383],{},"maxDepth",[1027,1385,1386,1389],{},[1042,1387,1388],{},"Alvo de drop",[1042,1390,1391,783,1393,783,1396,783,1399],{},[484,1392,1336],{},[484,1394,1395],{},"priority",[484,1397,1398],{},"accept",[484,1400,1357],{},[1027,1402,1403,1406],{},[1042,1404,1405],{},"Item",[1042,1407,1408,783,1410,783,1413],{},[484,1409,1336],{},[484,1411,1412],{},"keyboardMode",[484,1414,1316],{},[481,1416,1417],{},"Uma edição vale na hora, só para esta página, e nunca é gravada no seu código: a biblioteca lê o\nnovo valor onde lê a opção. Ela dura até você resetá-la (↺ por opção, ou o reset da barra\nsuperior), o provider ser desmontado ou a página recarregar. Uma opção editada mostra ao lado o\nvalor do seu código. Os itens montados enquanto uma edição está ativa — linhas de uma lista\nvirtual — também a recebem.",[501,1419,1421],{"id":1420},"state","Estado",[481,1423,1424],{},"O que cada provider sabe, para o nó que você escolheu:",[962,1426,1427,1434,1445],{},[965,1428,1429,1430,1433],{},"a ",[489,1431,1432],{},"sessão de arraste",": o status, os ids, os itens e o sensor ativos, o alvo e se ele aceita, o\nponteiro, o overlay, a sessão do grupo ordenável e a linha de inserção;",[965,1435,1436,1437,1440,1441,1444],{},"uma ",[489,1438,1439],{},"lista",": a ordem dela e o rascunho; uma ",[489,1442,1443],{},"árvore",": as linhas dela;",[965,1446,1447,1448,1451,1452,1455],{},"um ",[489,1449,1450],{},"item",": o tipo, os dados e a posição dele; um ",[489,1453,1454],{},"alvo de drop",": as regras dele.",[481,1457,1458],{},"Os itens são montados e desmontados sem eventos: o registro se atualiza em até um segundo.",[501,1460,1079],{"id":1461},"log",[481,1463,1464],{},"Uma faixa por arraste, em ordem:",[1021,1466,1467,1477],{},[1024,1468,1469],{},[1027,1470,1471,1474],{},[1030,1472,1473],{},"Entrada",[1030,1475,1476],{},"O que diz",[1037,1478,1479,1489,1502,1515,1527,1545],{},[1027,1480,1481,1486],{},[1042,1482,1483],{},[484,1484,1485],{},"drag start",[1042,1487,1488],{},"Os ids, o sensor e se foi por toque, a lista de onde vem.",[1027,1490,1491,1499],{},[1042,1492,1493,783,1496],{},[484,1494,1495],{},"over",[484,1497,1498],{},"left",[1042,1500,1501],{},"Cada alvo em que entrou e de que saiu, e se ele aceita.",[1027,1503,1504,1509],{},[1042,1505,1506],{},[484,1507,1508],{},"release",[1042,1510,1511,1512,1514],{},"O alvo sobre o qual foi solto, enquanto o ",[484,1513,1167],{}," decide.",[1027,1516,1517,1521],{},[1042,1518,1519],{},[484,1520,1167],{},[1042,1522,1523,1524,1526],{},"O veredito: aceito, alguns aceitos, rejeitado por um hook, recusado pelo ",[484,1525,1398],{}," do alvo, e quanto tempo os hooks levaram.",[1027,1528,1529,1534],{},[1042,1530,1531],{},[484,1532,1533],{},"drop",[1042,1535,1536,1537,1540,1541,1544],{},"O alvo; para listas ordenáveis, o movimento, ",[484,1538,1539],{},"e.result",", e se ",[484,1542,1543],{},"preventDefault()"," foi chamado.",[1027,1546,1547,1552],{},[1042,1548,1549],{},[484,1550,1551],{},"cancel",[1042,1553,1554,1555,1558,1559,1561],{},"O motivo: cancelado (Escape, ",[484,1556,1557],{},"cancel()","), rejeitado por um hook, ou recusado pelo ",[484,1560,1398],{}," do alvo.",[481,1563,1564,1565,1076,1568,1571,1572,1575,1576,1579],{},"Também ",[484,1566,1567],{},"auto-scroll on",[484,1569,1570],{},"off",", os textos de ",[484,1573,1574],{},"announcement"," (escondidos por padrão) e, fora dos\narrastes, ",[484,1577,1578],{},"animate"," (mudanças nos itens de uma lista que nenhum arraste fez). Clique em uma entrada\npara ver os dados dela. Uma aba aberta depois recebe os arrastes até então.",[501,1581,1583],{"id":1582},"debug-a-drop-step-by-step","Depurar um drop, passo a passo",[481,1585,1586],{},"Um card não entra em uma coluna. Com a aba aberta:",[1588,1589,1590,1599,1616,1637],"ol",{},[965,1591,1592,1595,1596,1598],{},[489,1593,1594],{},"Reproduza"," à mão, ou com ",[489,1597,1090],{},", para que as suas mãos fiquem livres para a aba.",[965,1600,1601,1604,1605,1608,1609,1612,1613,1615],{},[489,1602,1603],{},"Observe o mapa"," enquanto o card está sobre a coluna. Vermelho significa que a lista recusa o\ncard: veja o ",[484,1606,1607],{},"group"," dela (",[484,1610,1611],{},"put",") ou o ",[484,1614,1398],{}," do alvo. Azul significa que ela aceita, e o\nproblema vem depois.",[965,1617,1618,1621,1622,1624,1625,1627,1628,1630,1631,1633,1634,1636],{},[489,1619,1620],{},"Leia o log"," desse arraste. ",[484,1623,1167],{}," diz quem disse não — um hook, ou o ",[484,1626,1398],{}," do\nalvo. Se o drop foi concluído mas os seus dados não mudaram, a entrada ",[484,1629,1533],{}," diz se\n",[484,1632,1543],{}," foi chamado e o que ",[484,1635,1539],{}," continha: uma lista controlada precisa\naplicá-lo ela mesma.",[965,1638,1639,1642,1643,1645,1646,1648,1649,783,1651,1653],{},[489,1640,1641],{},"Teste uma correção ao vivo"," em ",[489,1644,1093],{}," — um ",[484,1647,1357],{}," mais flexível, outra\n",[484,1650,1300],{},[484,1652,1131],{}," — e depois escreva no seu código a que funcionar.",[501,1655,1657],{"id":1656},"how-it-works","Como funciona",[481,1659,1660,1661,1664],{},"Os providers se reportam a um hook que o lado da página instala. Até uma aba observar a página,\neles só são registrados; depois disso, a página escuta como qualquer monitor e envia à aba o que\nela mostra — a cada 40 ms durante um arraste, duas vezes por segundo no resto do tempo — e para\nassim que nenhuma aba a observa por alguns segundos. A aba conversa com a página por um\n",[484,1662,1663],{},"BroadcastChannel"," da origem da página. Ela não muda nada além do que você pede: os arrastes, a\nseleção e as substituições de opções.",[1666,1667,1668],"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":1670},[1671,1677,1678,1679,1680,1681,1682,1683,1684,1685],{"id":503,"depth":589,"text":294,"children":1672},[1673,1674,1675,1676],{"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":1018,"depth":589,"text":1019},{"id":1105,"depth":589,"text":1106},{"id":1137,"depth":589,"text":1138},{"id":1265,"depth":589,"text":1266},{"id":1420,"depth":589,"text":1421},{"id":1461,"depth":589,"text":1079},{"id":1582,"depth":589,"text":1583},{"id":1656,"depth":589,"text":1657},"Uma aba Vue DnD Kit no Vue DevTools e no Nuxt DevTools — um minimapa ao vivo, um joystick que arrasta de verdade, edição de opções ao vivo e um log de cada arraste.","md",null,{"source":1690},"6f7e373d0b",{"icon":116},{"title":113,"description":1686},"21KQ-suQ97sqzwLlRHR_XuI9SKEIB5kyxOC18ePqzng",[1695,1697],{"title":364,"path":365,"stem":366,"description":1696,"icon":111},"Como a entrada vira um arraste — os sensores de ponteiro e de teclado, restrições de ativação, canDrag, sensores seus e arrastes que você roteiriza com @vue-dnd-kit\u002Factions.",{"title":371,"path":372,"stem":373,"description":1698,"icon":121},"O arrastar e soltar do próprio navegador, como arrastes da biblioteca — arquivos, links e texto de outros apps para alvos de drop e listas que abrem espaço para eles, itens arrastados para fora da página, e entre janelas do seu app.",1793707583658]