[{"data":1,"prerenderedAt":1699},["ShallowReactive",2],{"navigation-source":3,"navigation-es":271,"docs-\u002Fes\u002Fdocs\u002Fguides\u002Fdevtools":474,"docs-surround-\u002Fes\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},"Es","\u002Fes","es",[277],{"title":278,"source":279,"path":280,"stem":281,"children":282,"page":35},"Documentación","6556add362","\u002Fes\u002Fdocs","es\u002Fdocs",[283,305,374,430],{"title":284,"source":285,"icon":11,"path":286,"stem":287,"children":288,"page":35},"Primeros pasos","e345edbff3","\u002Fes\u002Fdocs\u002Fgetting-started","es\u002Fdocs\u002F1.getting-started",[289,293,297,301],{"title":290,"path":291,"stem":292,"icon":19},"Introducción","\u002Fes\u002Fdocs\u002Fgetting-started\u002Fintroduction","es\u002Fdocs\u002F1.getting-started\u002F1.introduction",{"title":294,"path":295,"stem":296,"icon":24},"Instalación","\u002Fes\u002Fdocs\u002Fgetting-started\u002Finstallation","es\u002Fdocs\u002F1.getting-started\u002F2.installation",{"title":298,"path":299,"stem":300,"icon":29},"Inicio rápido","\u002Fes\u002Fdocs\u002Fgetting-started\u002Fquick-start","es\u002Fdocs\u002F1.getting-started\u002F3.quick-start",{"title":302,"path":303,"stem":304,"icon":34},"Migrar desde la v2","\u002Fes\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2","es\u002Fdocs\u002F1.getting-started\u002F4.migrating-from-v2",{"title":306,"source":307,"icon":38,"path":308,"stem":309,"children":310,"page":35},"Guías","0338bbaa33","\u002Fes\u002Fdocs\u002Fguides","es\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},"El provider","\u002Fes\u002Fdocs\u002Fguides\u002Fprovider","es\u002Fdocs\u002F2.guides\u002F01.provider",{"title":316,"path":317,"stem":318,"icon":51},"Arrastrar y soltar","\u002Fes\u002Fdocs\u002Fguides\u002Fdrag-and-drop","es\u002Fdocs\u002F2.guides\u002F02.drag-and-drop",{"title":320,"path":321,"stem":322,"icon":56},"Listas ordenables","\u002Fes\u002Fdocs\u002Fguides\u002Fsortable-lists","es\u002Fdocs\u002F2.guides\u002F03.sortable-lists",{"title":324,"path":325,"stem":326,"icon":61},"Listas que comparten ítems","\u002Fes\u002Fdocs\u002Fguides\u002Fshared-lists","es\u002Fdocs\u002F2.guides\u002F04.shared-lists",{"title":328,"path":329,"stem":330,"icon":66},"Árboles","\u002Fes\u002Fdocs\u002Fguides\u002Ftrees","es\u002Fdocs\u002F2.guides\u002F05.trees",{"title":332,"path":333,"stem":334,"icon":71},"Multi-drag y selección","\u002Fes\u002Fdocs\u002Fguides\u002Fmulti-drag","es\u002Fdocs\u002F2.guides\u002F06.multi-drag",{"title":336,"path":337,"stem":338,"icon":76},"El overlay","\u002Fes\u002Fdocs\u002Fguides\u002Foverlay","es\u002Fdocs\u002F2.guides\u002F07.overlay",{"title":340,"path":341,"stem":342,"icon":81},"Ejes, límites y cuadrículas","\u002Fes\u002Fdocs\u002Fguides\u002Fconstraints","es\u002Fdocs\u002F2.guides\u002F08.constraints",{"title":344,"path":345,"stem":346,"icon":86},"Decidir un drop","\u002Fes\u002Fdocs\u002Fguides\u002Fdrop-decisions","es\u002Fdocs\u002F2.guides\u002F09.drop-decisions",{"title":348,"path":349,"stem":350,"icon":91},"Animaciones","\u002Fes\u002Fdocs\u002Fguides\u002Fanimations","es\u002Fdocs\u002F2.guides\u002F10.animations",{"title":352,"path":353,"stem":354,"icon":96},"Accesibilidad","\u002Fes\u002Fdocs\u002Fguides\u002Faccessibility","es\u002Fdocs\u002F2.guides\u002F11.accessibility",{"title":356,"path":357,"stem":358,"icon":101},"Listas virtuales","\u002Fes\u002Fdocs\u002Fguides\u002Fvirtual-lists","es\u002Fdocs\u002F2.guides\u002F12.virtual-lists",{"title":360,"path":361,"stem":362,"icon":106},"Estilos","\u002Fes\u002Fdocs\u002Fguides\u002Fstyling","es\u002Fdocs\u002F2.guides\u002F13.styling",{"title":364,"path":365,"stem":366,"icon":111},"Sensores y arrastres programáticos","\u002Fes\u002Fdocs\u002Fguides\u002Fsensors","es\u002Fdocs\u002F2.guides\u002F14.sensors",{"title":113,"path":368,"stem":369,"icon":116},"\u002Fes\u002Fdocs\u002Fguides\u002Fdevtools","es\u002Fdocs\u002F2.guides\u002F15.devtools",{"title":371,"path":372,"stem":373,"icon":121},"Archivos y otras apps","\u002Fes\u002Fdocs\u002Fguides\u002Fnative","es\u002Fdocs\u002F2.guides\u002F16.native",{"title":123,"source":375,"icon":124,"path":376,"stem":377,"children":378,"page":35},"5c96005c70","\u002Fes\u002Fdocs\u002Fapi","es\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},"\u002Fes\u002Fdocs\u002Fapi\u002Fdnd-provider","es\u002Fdocs\u002F3.api\u002F01.dnd-provider",{"title":134,"path":383,"stem":384,"icon":51},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-draggable","es\u002Fdocs\u002F3.api\u002F02.make-draggable",{"title":138,"path":386,"stem":387,"icon":141},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-droppable","es\u002Fdocs\u002F3.api\u002F03.make-droppable",{"title":143,"path":389,"stem":390,"icon":56},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-sortable-list","es\u002Fdocs\u002F3.api\u002F04.make-sortable-list",{"title":147,"path":392,"stem":393,"icon":150},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-sortable-item","es\u002Fdocs\u002F3.api\u002F05.make-sortable-item",{"title":152,"path":395,"stem":396,"icon":155},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-sortable-tree","es\u002Fdocs\u002F3.api\u002F06.make-sortable-tree",{"title":157,"path":398,"stem":399,"icon":160},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-selection-area","es\u002Fdocs\u002F3.api\u002F07.make-selection-area",{"title":162,"path":401,"stem":402,"icon":165},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-drag-area","es\u002Fdocs\u002F3.api\u002F08.make-drag-area",{"title":404,"path":405,"stem":406,"icon":170},"useDnD y monitores","\u002Fes\u002Fdocs\u002Fapi\u002Fuse-dnd","es\u002Fdocs\u002F3.api\u002F09.use-dnd",{"title":408,"path":409,"stem":410,"icon":29},"Eventos","\u002Fes\u002Fdocs\u002Fapi\u002Fevents","es\u002Fdocs\u002F3.api\u002F10.events",{"title":412,"path":413,"stem":414,"icon":179},"Modificadores y colisión","\u002Fes\u002Fdocs\u002Fapi\u002Fmodifiers","es\u002Fdocs\u002F3.api\u002F11.modifiers",{"title":416,"path":417,"stem":418,"icon":71},"DragPreview y props del overlay","\u002Fes\u002Fdocs\u002Fapi\u002Fdrag-preview","es\u002Fdocs\u002F3.api\u002F12.drag-preview",{"title":348,"path":420,"stem":421,"icon":187},"\u002Fes\u002Fdocs\u002Fapi\u002Fanimations","es\u002Fdocs\u002F3.api\u002F13.animations",{"title":423,"path":424,"stem":425,"icon":192},"Sensores","\u002Fes\u002Fdocs\u002Fapi\u002Fsensors","es\u002Fdocs\u002F3.api\u002F14.sensors",{"title":427,"path":428,"stem":429,"icon":197},"Tipos comunes","\u002Fes\u002Fdocs\u002Fapi\u002Ftypes","es\u002Fdocs\u002F3.api\u002F15.types",{"title":431,"path":432,"stem":433,"children":434,"icon":205,"source":473},"Ejemplos","\u002Fes\u002Fdocs\u002Fexamples","es\u002Fdocs\u002F4.examples\u002F00.index",[435,437,441,445,449,453,457,461,465,469],{"title":436,"path":432,"stem":433,"icon":205},"Resumen",{"title":438,"path":439,"stem":440,"icon":210},"Tablero de proyecto","\u002Fes\u002Fdocs\u002Fexamples\u002Fboard","es\u002Fdocs\u002F4.examples\u002F01.board",{"title":442,"path":443,"stem":444,"icon":215},"Calendario semanal","\u002Fes\u002Fdocs\u002Fexamples\u002Fcalendar","es\u002Fdocs\u002F4.examples\u002F02.calendar",{"title":446,"path":447,"stem":448,"icon":220},"Gestor de archivos","\u002Fes\u002Fdocs\u002Fexamples\u002Ffile-manager","es\u002Fdocs\u002F4.examples\u002F03.file-manager",{"title":450,"path":451,"stem":452,"icon":225},"Editor de bloques","\u002Fes\u002Fdocs\u002Fexamples\u002Fblock-editor","es\u002Fdocs\u002F4.examples\u002F04.block-editor",{"title":454,"path":455,"stem":456,"icon":230},"Ajedrez","\u002Fes\u002Fdocs\u002Fexamples\u002Fchess","es\u002Fdocs\u002F4.examples\u002F05.chess",{"title":458,"path":459,"stem":460,"icon":235},"Constructor de formularios","\u002Fes\u002Fdocs\u002Fexamples\u002Fform-builder","es\u002Fdocs\u002F4.examples\u002F06.form-builder",{"title":462,"path":463,"stem":464,"icon":240},"Lienzo de diseño","\u002Fes\u002Fdocs\u002Fexamples\u002Fdesign-canvas","es\u002Fdocs\u002F4.examples\u002F07.design-canvas",{"title":466,"path":467,"stem":468,"icon":245},"Constructor de páginas","\u002Fes\u002Fdocs\u002Fexamples\u002Fpage-builder","es\u002Fdocs\u002F4.examples\u002F08.page-builder",{"title":470,"path":471,"stem":472,"icon":250},"Tabla de datos","\u002Fes\u002Fdocs\u002Fexamples\u002Fdata-table","es\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_es\u002Fes\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,1463,1466,1561,1579,1583,1586,1654,1658,1665],[481,482,483,487,488,492,493,496],"p",{},[484,485,486],"code",{},"@vue-dnd-kit\u002Fdevtools"," añade una pestaña ",[489,490,491],"strong",{},"Vue DnD Kit"," a las Vue DevTools\n(",[484,494,495],{},"vite-plugin-vue-devtools",") y a las Nuxt DevTools. Muestra cada lista, árbol y destino de drop de\nla página en un minimapa en vivo, arrastra cualquier ítem con un joystick, edita opciones mientras\nla app se ejecuta y registra lo que hizo cada arrastre. Solo funciona en desarrollo: nada de ella\nllega a una build de producción.",[481,498,499],{},"La pestaña es una página propia, servida por tu servidor de desarrollo junto a tu app, así que no\npuede ejecutarse dentro de esta documentación. Se configura en tres pasos.",[501,502,294],"h2",{"id":503},"install",[505,506,508],"h3",{"id":507},"_1-add-the-packages","1. Añadir los paquetes",[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"," es una peer dependency: los movimientos de la pestaña pasan por él. npm 7+\ny pnpm lo instalan solos; con Yarn 1, añádelo.",[505,547,549],{"id":548},"_2-add-the-plugin","2. Añadir el 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],{},"Con Vite, el plugin hace tres cosas en el servidor de desarrollo (",[484,747,748],{},"vite serve","): sirve la pestaña\nen ",[484,751,752],{},"\u002F__vue-dnd-kit-devtools\u002F"," (bajo tu ",[484,755,756],{},"base","), la añade a las Vue DevTools y hace que la página le\ninforme antes de que arranque tu app. No hace falta ningún ",[484,759,760],{},"app.use()",", y las builds no se tocan.",[481,763,764,765,768,769,772],{},"Con Nuxt, el módulo ",[484,766,767],{},"@vue-dnd-kit\u002Fnuxt"," encuentra el paquete, sirve la pestaña, la añade a las\nNuxt DevTools e instala la parte de la página con un plugin de cliente.\n",[484,770,771],{},"vueDndKit: { devtools: false }"," la desactiva.",[505,774,776],{"id":775},"_3-run-the-app-in-development","3. Ejecutar la app en desarrollo",[481,778,779,780,783,784,787],{},"Arranca el servidor de desarrollo como siempre (",[484,781,782],{},"vite",", ",[484,785,786],{},"nuxt dev",") y abre la app: la pestaña está\nlista. Cada provider de la página aparece en ella, sea cual sea la app en la que se renderiza.",[505,789,791],{"id":790},"without-the-plugins","Sin los plugins",[481,793,794,795,798],{},"Para un servidor de desarrollo propio, o una página que Vite no sirve a partir de un ",[484,796,797],{},"index.html","\n(configuraciones SSR), instala tú la parte de la página:",[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],{},"O importa ",[484,924,925],{},"@vue-dnd-kit\u002Fdevtools\u002Fauto"," lo primero en el archivo de entrada. Usa\n",[484,928,929],{},"vueDnDKitDevtools({ inject: false })"," cuando el plugin deba servir la pestaña pero la parte de la\npágina la instales tú; ",[484,932,933],{},"serveTab()"," de ",[484,936,937],{},"@vue-dnd-kit\u002Fdevtools\u002Fvite"," es el middleware que sirve la\npestaña.",[940,941,942],"note",{},[481,943,944,945,948,949,952,953,956],{},"En una build de producción, ",[484,946,947],{},"app.use(DnDDevtools)"," y el import ",[484,950,951],{},"auto"," se reducen casi a nada: cada\npunto de entrada comprueba primero ",[484,954,955],{},"process.env.NODE_ENV",", y los bundlers eliminan el resto. En el\nservidor no hacen nada.",[501,958,960],{"id":959},"open-it","Abrirla",[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",", o el botón de Vue\nen la parte inferior de la página, y luego la pestaña ",[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},", o el botón de\nNuxt, y luego ",[489,998,491],{}," (en la barra lateral o en su menú de desbordamiento).",[965,1001,1002,1005,1006,1009],{},[489,1003,1004],{},"Una ventana propia",": abre ",[484,1007,1008],{},"http:\u002F\u002Flocalhost:5173\u002F__vue-dnd-kit-devtools\u002F"," en tu servidor de\ndesarrollo, o el botón ⧉ de la pestaña. Muy práctico en una segunda pantalla. Con varias páginas\nabiertas, un selector arriba elige la que observar.",[1011,1012,1013],"warning",{},[481,1014,1015],{},"Mantén la pestaña en una ventana propia, no en una pestaña del navegador en segundo plano de la\nmisma ventana: la página debe seguir visible, y una página oculta cancela los arrastres.",[501,1017,1019],{"id":1018},"the-tab-at-a-glance","La pestaña de un vistazo",[1021,1022,1023,1036],"table",{},[1024,1025,1026],"thead",{},[1027,1028,1029,1033],"tr",{},[1030,1031,1032],"th",{},"Parte",[1030,1034,1035],{},"Qué contiene",[1037,1038,1039,1056,1068,1083],"tbody",{},[1027,1040,1041,1045],{},[1042,1043,1044],"td",{},"Barra superior",[1042,1046,1047,1048,1051,1052,1055],{},"Lo que está haciendo el arrastre ahora mismo (",[484,1049,1050],{},"dragging card-3 → done (accepts)","), la página observada, ",[489,1053,1054],{},"⌖ Pick",", el número de opciones editadas con un botón para restablecerlas, ⧉ (una ventana propia) y el tema.",[1027,1057,1058,1061],{},[1042,1059,1060],{},"Izquierda: el registro",[1042,1062,1063,1064,1067],{},"Cada provider como un árbol: sus listas, árboles, destinos de drop y elementos arrastrables. ",[489,1065,1066],{},"☰"," lo muestra u oculta.",[1027,1069,1070,1080],{},[1042,1071,1072,1073,1076,1077],{},"Centro: ",[489,1074,1075],{},"Map"," y ",[489,1078,1079],{},"Log",[1042,1081,1082],{},"El minimapa en vivo de la página, o el registro de los arrastres.",[1027,1084,1085,1097],{},[1042,1086,1087,1088,783,1091,783,1094],{},"Derecha: ",[489,1089,1090],{},"Drive",[489,1092,1093],{},"Options",[489,1095,1096],{},"State",[1042,1098,1099],{},"El joystick y los botones de mover, las opciones del nodo elegido y lo que el provider sabe de él.",[481,1101,1102],{},"Elige un nodo en el registro o un ítem en el mapa, y la parte derecha lo sigue.",[501,1104,1106],{"id":1105},"the-mini-map","El minimapa",[481,1108,1109],{},"Una tarjeta en vivo por lista, árbol y destino de drop, con copias de sus ítems donde están — los\nmismos clones que mostraría el overlay, con el CSS de la página. Durante un arrastre marca:",[962,1111,1112,1123,1126],{},[965,1113,1114,1115,1118,1119,1122],{},"las listas y los destinos que ",[489,1116,1117],{},"aceptan"," el arrastre (en azul) o lo ",[489,1120,1121],{},"rechazan"," (en rojo);",[965,1124,1125],{},"el placeholder y el destino bajo el puntero;",[965,1127,1128,1129,889],{},"el puntero, la caja del overlay y la línea de inserción de las listas con\n",[484,1130,1131],{},"placeholder: 'indicator'",[481,1133,1134],{},"Un clic elige un ítem y lo resalta en la página; un doble clic desplaza la página hasta él. Usa el\nmapa cuando un drop no va adonde esperas: muestra de un vistazo qué listas aceptan el arrastre.",[501,1136,1138],{"id":1137},"drive-the-joystick","Drive: el joystick",[481,1140,1141,1142,1144,1145,1076,1148,1151],{},"Elige un ítem — en el mapa, en el registro o con ",[489,1143,1054],{},", que toma la siguiente pulsación sobre\nun elemento arrastrable de la página en lugar de dejar que actúe — y empuja la palanca del\njoystick. El ítem se agarra y se mueve en esa dirección, más rápido cuanto más lejos del centro\nesté la palanca. Suéltala y se detiene; ",[489,1146,1147],{},"Drop",[489,1149,1150],{},"Cancel"," terminan el arrastre.",[481,1153,1154,1155,1158,1159,1164,1165,1076,1168,1171],{},"Es un arrastre de puntero real de un sensor llamado ",[484,1156,1157],{},"devtools",", hecho con la\n",[1160,1161,1163],"a",{"href":1162},"\u002Fdocs\u002Fguides\u002Fsensors#a-sensor-of-your-own","API pública de sensores",": las listas ordenan debajo,\nlos contenedores se desplazan automáticamente en sus bordes, y ",[484,1166,1167],{},"onBeforeDrop",[484,1169,1170],{},"onDrop"," se\nejecutan como en cualquier arrastre. Los ítems desactivados no se agarran. También se puede\ndirigir un arrastre con teclado que haya empezado la página.",[481,1173,1174,1175,1181],{},"Los ítems de las listas ordenables tienen además botones: arriba, abajo, al principio, al final, a\notra lista del grupo. Cada uno es un arrastre con teclado de\n",[1160,1176,1178],{"href":1177},"\u002Fdocs\u002Fguides\u002Fsensors#programmatic-drags",[484,1179,1180],{},"moveItem",". Debajo del joystick, una copia grande de lo\nque muestra el overlay.",[1021,1183,1184,1194],{},[1024,1185,1186],{},[1027,1187,1188,1191],{},[1030,1189,1190],{},"Tecla, en la pestaña",[1030,1192,1193],{},"Hace",[1037,1195,1196,1219,1229,1243,1253],{},[1027,1197,1198,1213],{},[1042,1199,1200,1201,1204,1205,1204,1208,1204,1211],{},"Flechas o ",[972,1202],{"value":1203},"W"," ",[972,1206],{"value":1207},"A",[972,1209],{"value":1210},"S",[972,1212],{"value":981},[1042,1214,1215,1216,1218],{},"Empuja la palanca en esa dirección, a medio recorrido; con ",[972,1217],{"value":978},", hasta el tope",[1027,1220,1221,1226],{},[1042,1222,1223],{},[972,1224],{"value":1225},"G",[1042,1227,1228],{},"Agarra el ítem elegido",[1027,1230,1231,1240],{},[1042,1232,1233,1236,1237],{},[972,1234],{"value":1235},"Space"," \u002F ",[972,1238],{"value":1239},"Enter",[1042,1241,1242],{},"Suelta",[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],{},"Elige en la página",[501,1264,1266],{"id":1265},"options","Opciones",[481,1268,1269,1270,675],{},"Toda opción que no sea un callback se puede editar mientras la app se ejecuta. Elige el nodo y\nabre ",[489,1271,1093],{},[1021,1273,1274,1283],{},[1024,1275,1276],{},[1027,1277,1278,1281],{},[1030,1279,1280],{},"Nodo",[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"," (los de la biblioteca, por nombre), ",[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],{},"Árbol",[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],{},"Destino 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],{},"Ítem",[1042,1407,1408,783,1410,783,1413],{},[484,1409,1336],{},[484,1411,1412],{},"keyboardMode",[484,1414,1316],{},[481,1416,1417],{},"Una edición se aplica al momento, solo a esta página, y nunca se escribe en tu código: la\nbiblioteca lee el nuevo valor donde lee la opción. Dura hasta que la restableces (↺ por opción, o\nel botón de la barra superior), se desmonta el provider o se recarga la página. Una opción editada\nmuestra a su lado el valor de tu código. Los ítems que se montan mientras hay una edición activa —\nfilas de una lista virtual — también la reciben.",[501,1419,1421],{"id":1420},"state","Estado",[481,1423,1424],{},"Lo que sabe cada provider, para el nodo que elegiste:",[962,1426,1427,1434,1445],{},[965,1428,1429,1430,1433],{},"la ",[489,1431,1432],{},"sesión de arrastre",": el estado, los ids, ítems y sensor activos, el destino y si acepta,\nel puntero, el overlay, la sesión del grupo ordenable y la línea de inserción;",[965,1435,1436,1437,1440,1441,1444],{},"una ",[489,1438,1439],{},"lista",": su orden y su borrador; un ",[489,1442,1443],{},"árbol",": sus filas;",[965,1446,1447,1448,1451,1452,1455],{},"un ",[489,1449,1450],{},"ítem",": su tipo, sus datos y su posición; un ",[489,1453,1454],{},"destino de drop",": sus reglas.",[481,1457,1458],{},"Los ítems se montan y desmontan sin eventos: el registro se pone al día en menos de un segundo.",[501,1460,1462],{"id":1461},"log","Registro",[481,1464,1465],{},"Una franja por arrastre, en orden:",[1021,1467,1468,1478],{},[1024,1469,1470],{},[1027,1471,1472,1475],{},[1030,1473,1474],{},"Entrada",[1030,1476,1477],{},"Qué indica",[1037,1479,1480,1490,1503,1515,1527,1544],{},[1027,1481,1482,1487],{},[1042,1483,1484],{},[484,1485,1486],{},"drag start",[1042,1488,1489],{},"Los ids, el sensor y si es táctil, la lista de la que viene.",[1027,1491,1492,1500],{},[1042,1493,1494,783,1497],{},[484,1495,1496],{},"over",[484,1498,1499],{},"left",[1042,1501,1502],{},"Cada destino en el que entra y del que sale, y si acepta.",[1027,1504,1505,1510],{},[1042,1506,1507],{},[484,1508,1509],{},"release",[1042,1511,1512,1513,889],{},"El destino sobre el que se soltó, mientras decide ",[484,1514,1167],{},[1027,1516,1517,1521],{},[1042,1518,1519],{},[484,1520,1167],{},[1042,1522,1523,1524,1526],{},"El veredicto: aceptado, algunos aceptados, rechazado por un hook, rechazado por el ",[484,1525,1398],{}," del destino, y cuánto tardaron los hooks.",[1027,1528,1529,1534],{},[1042,1530,1531],{},[484,1532,1533],{},"drop",[1042,1535,1536,1537,1540,1541,889],{},"El destino; en las listas ordenables, el movimiento, ",[484,1538,1539],{},"e.result"," y si se llamó a ",[484,1542,1543],{},"preventDefault()",[1027,1545,1546,1551],{},[1042,1547,1548],{},[484,1549,1550],{},"cancel",[1042,1552,1553,1554,1557,1558,1560],{},"Por qué: cancelado (Escape, ",[484,1555,1556],{},"cancel()","), rechazado por un hook o rechazado por el ",[484,1559,1398],{}," del destino.",[481,1562,1563,1564,1076,1567,1570,1571,1574,1575,1578],{},"También ",[484,1565,1566],{},"auto-scroll on",[484,1568,1569],{},"off",", los textos de ",[484,1572,1573],{},"announcement"," (ocultos por defecto) y, fuera de\nlos arrastres, ",[484,1576,1577],{},"animate"," (cambios de los ítems de una lista que no hizo ningún arrastre). Haz clic\nen una entrada para ver sus datos. Una pestaña que se abre más tarde recibe los arrastres hechos\nhasta entonces.",[501,1580,1582],{"id":1581},"debug-a-drop-step-by-step","Depurar un drop, paso a paso",[481,1584,1585],{},"Una tarjeta no entra en una columna. Con la pestaña abierta:",[1587,1588,1589,1598,1615,1636],"ol",{},[965,1590,1591,1594,1595,1597],{},[489,1592,1593],{},"Reprodúcelo"," a mano, o con ",[489,1596,1090],{}," para tener las manos libres para la pestaña.",[965,1599,1600,1603,1604,1607,1608,1611,1612,1614],{},[489,1601,1602],{},"Mira el mapa"," mientras la tarjeta está sobre la columna. Rojo significa que la lista\nrechaza la tarjeta: revisa su ",[484,1605,1606],{},"group"," (",[484,1609,1610],{},"put",") o el ",[484,1613,1398],{}," del destino. Azul significa que la\nacepta, y el problema viene después.",[965,1616,1617,1620,1621,1623,1624,1626,1627,1629,1630,1632,1633,1635],{},[489,1618,1619],{},"Lee el registro"," de ese arrastre. ",[484,1622,1167],{}," dice quién dijo que no — un hook, o el\n",[484,1625,1398],{}," del destino. Si el drop se completó pero tus datos no cambiaron, la entrada ",[484,1628,1533],{},"\ndice si se llamó a ",[484,1631,1543],{}," y qué contenía ",[484,1634,1539],{},": una lista controlada debe\naplicarlo ella misma.",[965,1637,1638,1641,1642,1644,1645,1647,1648,1650,1651,1653],{},[489,1639,1640],{},"Prueba un arreglo en vivo"," en ",[489,1643,1093],{}," — un ",[484,1646,1357],{}," más permisivo, otra ",[484,1649,1300],{},",\n",[484,1652,1131],{}," — y luego escribe en tu código el que funcione.",[501,1655,1657],{"id":1656},"how-it-works","Cómo funciona",[481,1659,1660,1661,1664],{},"Los providers informan a un hook que instala la parte de la página. Mientras ninguna pestaña\nobserva la página, solo se registran; después, la página escucha como cualquier monitor y envía a\nla pestaña lo que muestra — cada 40 ms durante un arrastre, dos veces por segundo el resto del\ntiempo — y se detiene cuando ninguna pestaña la ha observado durante unos segundos. La pestaña\nhabla con la página a través de un ",[484,1662,1663],{},"BroadcastChannel"," del origen de la página. No cambia nada más\nque lo que pides: los arrastres, la selección y las opciones sobrescritas.",[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":1462},{"id":1581,"depth":589,"text":1582},{"id":1656,"depth":589,"text":1657},"Una pestaña de Vue DnD Kit en las Vue DevTools y las Nuxt DevTools — un minimapa en vivo, un joystick que arrastra de verdad, edición de opciones en vivo y un registro de cada arrastre.","md",null,{"source":1690},"6f7e373d0b",{"icon":116},{"title":113,"description":1686},"J2jvqW3EsZpzHe79HnchVOC8fSJjouLBOtR9v6w2UKg",[1695,1697],{"title":364,"path":365,"stem":366,"description":1696,"icon":111},"Cómo la entrada se convierte en un arrastre — los sensores de puntero y teclado, las restricciones de activación, canDrag, sensores propios y arrastres que programas con @vue-dnd-kit\u002Factions.",{"title":371,"path":372,"stem":373,"description":1698,"icon":121},"El arrastrar y soltar propio del navegador, como arrastres de la biblioteca — archivos, enlaces y texto de otras apps en destinos de drop y listas que les hacen sitio, ítems arrastrados fuera de la página, y entre ventanas de tu app.",1793707573090]