[{"data":1,"prerenderedAt":1691},["ShallowReactive",2],{"navigation-source":3,"navigation-ru":271,"docs-\u002Fru\u002Fdocs\u002Fguides\u002Fdevtools":473,"docs-surround-\u002Fru\u002Fdocs\u002Fguides\u002Fdevtools":1686},[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},"Ru","\u002Fru","ru",[277],{"title":278,"source":279,"path":280,"stem":281,"children":282,"page":35},"Документация","6556add362","\u002Fru\u002Fdocs","ru\u002Fdocs",[283,305,373,429],{"title":284,"source":285,"icon":11,"path":286,"stem":287,"children":288,"page":35},"Начало работы","e345edbff3","\u002Fru\u002Fdocs\u002Fgetting-started","ru\u002Fdocs\u002F1.getting-started",[289,293,297,301],{"title":290,"path":291,"stem":292,"icon":19},"Введение","\u002Fru\u002Fdocs\u002Fgetting-started\u002Fintroduction","ru\u002Fdocs\u002F1.getting-started\u002F1.introduction",{"title":294,"path":295,"stem":296,"icon":24},"Установка","\u002Fru\u002Fdocs\u002Fgetting-started\u002Finstallation","ru\u002Fdocs\u002F1.getting-started\u002F2.installation",{"title":298,"path":299,"stem":300,"icon":29},"Быстрый старт","\u002Fru\u002Fdocs\u002Fgetting-started\u002Fquick-start","ru\u002Fdocs\u002F1.getting-started\u002F3.quick-start",{"title":302,"path":303,"stem":304,"icon":34},"Переход с v2","\u002Fru\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2","ru\u002Fdocs\u002F1.getting-started\u002F4.migrating-from-v2",{"title":306,"source":307,"icon":38,"path":308,"stem":309,"children":310,"page":35},"Руководства","0338bbaa33","\u002Fru\u002Fdocs\u002Fguides","ru\u002Fdocs\u002F2.guides",[311,315,318,322,326,330,334,338,342,346,350,354,358,362,366,369],{"title":312,"path":313,"stem":314,"icon":46},"Провайдер","\u002Fru\u002Fdocs\u002Fguides\u002Fprovider","ru\u002Fdocs\u002F2.guides\u002F01.provider",{"title":48,"path":316,"stem":317,"icon":51},"\u002Fru\u002Fdocs\u002Fguides\u002Fdrag-and-drop","ru\u002Fdocs\u002F2.guides\u002F02.drag-and-drop",{"title":319,"path":320,"stem":321,"icon":56},"Сортируемые списки","\u002Fru\u002Fdocs\u002Fguides\u002Fsortable-lists","ru\u002Fdocs\u002F2.guides\u002F03.sortable-lists",{"title":323,"path":324,"stem":325,"icon":61},"Списки с общими элементами","\u002Fru\u002Fdocs\u002Fguides\u002Fshared-lists","ru\u002Fdocs\u002F2.guides\u002F04.shared-lists",{"title":327,"path":328,"stem":329,"icon":66},"Деревья","\u002Fru\u002Fdocs\u002Fguides\u002Ftrees","ru\u002Fdocs\u002F2.guides\u002F05.trees",{"title":331,"path":332,"stem":333,"icon":71},"Мульти-драг и выделение","\u002Fru\u002Fdocs\u002Fguides\u002Fmulti-drag","ru\u002Fdocs\u002F2.guides\u002F06.multi-drag",{"title":335,"path":336,"stem":337,"icon":76},"Оверлей","\u002Fru\u002Fdocs\u002Fguides\u002Foverlay","ru\u002Fdocs\u002F2.guides\u002F07.overlay",{"title":339,"path":340,"stem":341,"icon":81},"Оси, границы и сетки","\u002Fru\u002Fdocs\u002Fguides\u002Fconstraints","ru\u002Fdocs\u002F2.guides\u002F08.constraints",{"title":343,"path":344,"stem":345,"icon":86},"Решение о броске","\u002Fru\u002Fdocs\u002Fguides\u002Fdrop-decisions","ru\u002Fdocs\u002F2.guides\u002F09.drop-decisions",{"title":347,"path":348,"stem":349,"icon":91},"Анимации","\u002Fru\u002Fdocs\u002Fguides\u002Fanimations","ru\u002Fdocs\u002F2.guides\u002F10.animations",{"title":351,"path":352,"stem":353,"icon":96},"Доступность","\u002Fru\u002Fdocs\u002Fguides\u002Faccessibility","ru\u002Fdocs\u002F2.guides\u002F11.accessibility",{"title":355,"path":356,"stem":357,"icon":101},"Виртуальные списки","\u002Fru\u002Fdocs\u002Fguides\u002Fvirtual-lists","ru\u002Fdocs\u002F2.guides\u002F12.virtual-lists",{"title":359,"path":360,"stem":361,"icon":106},"Стилизация","\u002Fru\u002Fdocs\u002Fguides\u002Fstyling","ru\u002Fdocs\u002F2.guides\u002F13.styling",{"title":363,"path":364,"stem":365,"icon":111},"Сенсоры и программное перетаскивание","\u002Fru\u002Fdocs\u002Fguides\u002Fsensors","ru\u002Fdocs\u002F2.guides\u002F14.sensors",{"title":113,"path":367,"stem":368,"icon":116},"\u002Fru\u002Fdocs\u002Fguides\u002Fdevtools","ru\u002Fdocs\u002F2.guides\u002F15.devtools",{"title":370,"path":371,"stem":372,"icon":121},"Файлы и другие приложения","\u002Fru\u002Fdocs\u002Fguides\u002Fnative","ru\u002Fdocs\u002F2.guides\u002F16.native",{"title":123,"source":374,"icon":124,"path":375,"stem":376,"children":377,"page":35},"5c96005c70","\u002Fru\u002Fdocs\u002Fapi","ru\u002Fdocs\u002F3.api",[378,381,384,387,390,393,396,399,402,406,410,414,418,421,425],{"title":129,"path":379,"stem":380,"icon":132},"\u002Fru\u002Fdocs\u002Fapi\u002Fdnd-provider","ru\u002Fdocs\u002F3.api\u002F01.dnd-provider",{"title":134,"path":382,"stem":383,"icon":51},"\u002Fru\u002Fdocs\u002Fapi\u002Fmake-draggable","ru\u002Fdocs\u002F3.api\u002F02.make-draggable",{"title":138,"path":385,"stem":386,"icon":141},"\u002Fru\u002Fdocs\u002Fapi\u002Fmake-droppable","ru\u002Fdocs\u002F3.api\u002F03.make-droppable",{"title":143,"path":388,"stem":389,"icon":56},"\u002Fru\u002Fdocs\u002Fapi\u002Fmake-sortable-list","ru\u002Fdocs\u002F3.api\u002F04.make-sortable-list",{"title":147,"path":391,"stem":392,"icon":150},"\u002Fru\u002Fdocs\u002Fapi\u002Fmake-sortable-item","ru\u002Fdocs\u002F3.api\u002F05.make-sortable-item",{"title":152,"path":394,"stem":395,"icon":155},"\u002Fru\u002Fdocs\u002Fapi\u002Fmake-sortable-tree","ru\u002Fdocs\u002F3.api\u002F06.make-sortable-tree",{"title":157,"path":397,"stem":398,"icon":160},"\u002Fru\u002Fdocs\u002Fapi\u002Fmake-selection-area","ru\u002Fdocs\u002F3.api\u002F07.make-selection-area",{"title":162,"path":400,"stem":401,"icon":165},"\u002Fru\u002Fdocs\u002Fapi\u002Fmake-drag-area","ru\u002Fdocs\u002F3.api\u002F08.make-drag-area",{"title":403,"path":404,"stem":405,"icon":170},"useDnD и мониторы","\u002Fru\u002Fdocs\u002Fapi\u002Fuse-dnd","ru\u002Fdocs\u002F3.api\u002F09.use-dnd",{"title":407,"path":408,"stem":409,"icon":29},"События","\u002Fru\u002Fdocs\u002Fapi\u002Fevents","ru\u002Fdocs\u002F3.api\u002F10.events",{"title":411,"path":412,"stem":413,"icon":179},"Модификаторы и коллизии","\u002Fru\u002Fdocs\u002Fapi\u002Fmodifiers","ru\u002Fdocs\u002F3.api\u002F11.modifiers",{"title":415,"path":416,"stem":417,"icon":71},"DragPreview и пропсы оверлея","\u002Fru\u002Fdocs\u002Fapi\u002Fdrag-preview","ru\u002Fdocs\u002F3.api\u002F12.drag-preview",{"title":347,"path":419,"stem":420,"icon":187},"\u002Fru\u002Fdocs\u002Fapi\u002Fanimations","ru\u002Fdocs\u002F3.api\u002F13.animations",{"title":422,"path":423,"stem":424,"icon":192},"Сенсоры","\u002Fru\u002Fdocs\u002Fapi\u002Fsensors","ru\u002Fdocs\u002F3.api\u002F14.sensors",{"title":426,"path":427,"stem":428,"icon":197},"Общие типы","\u002Fru\u002Fdocs\u002Fapi\u002Ftypes","ru\u002Fdocs\u002F3.api\u002F15.types",{"title":430,"path":431,"stem":432,"children":433,"icon":205,"source":472},"Примеры","\u002Fru\u002Fdocs\u002Fexamples","ru\u002Fdocs\u002F4.examples\u002F00.index",[434,436,440,444,448,452,456,460,464,468],{"title":435,"path":431,"stem":432,"icon":205},"Обзор",{"title":437,"path":438,"stem":439,"icon":210},"Доска проекта","\u002Fru\u002Fdocs\u002Fexamples\u002Fboard","ru\u002Fdocs\u002F4.examples\u002F01.board",{"title":441,"path":442,"stem":443,"icon":215},"Календарь на неделю","\u002Fru\u002Fdocs\u002Fexamples\u002Fcalendar","ru\u002Fdocs\u002F4.examples\u002F02.calendar",{"title":445,"path":446,"stem":447,"icon":220},"Файловый менеджер","\u002Fru\u002Fdocs\u002Fexamples\u002Ffile-manager","ru\u002Fdocs\u002F4.examples\u002F03.file-manager",{"title":449,"path":450,"stem":451,"icon":225},"Блочный редактор","\u002Fru\u002Fdocs\u002Fexamples\u002Fblock-editor","ru\u002Fdocs\u002F4.examples\u002F04.block-editor",{"title":453,"path":454,"stem":455,"icon":230},"Шахматы","\u002Fru\u002Fdocs\u002Fexamples\u002Fchess","ru\u002Fdocs\u002F4.examples\u002F05.chess",{"title":457,"path":458,"stem":459,"icon":235},"Конструктор форм","\u002Fru\u002Fdocs\u002Fexamples\u002Fform-builder","ru\u002Fdocs\u002F4.examples\u002F06.form-builder",{"title":461,"path":462,"stem":463,"icon":240},"Холст для дизайна","\u002Fru\u002Fdocs\u002Fexamples\u002Fdesign-canvas","ru\u002Fdocs\u002F4.examples\u002F07.design-canvas",{"title":465,"path":466,"stem":467,"icon":245},"Конструктор страниц","\u002Fru\u002Fdocs\u002Fexamples\u002Fpage-builder","ru\u002Fdocs\u002F4.examples\u002F08.page-builder",{"title":469,"path":470,"stem":471,"icon":250},"Таблица данных","\u002Fru\u002Fdocs\u002Fexamples\u002Fdata-table","ru\u002Fdocs\u002F4.examples\u002F09.data-table","bd60379aec",{"page":474,"fallback":35},{"id":475,"title":113,"body":476,"category":306,"description":1678,"extension":1679,"links":1680,"meta":1681,"navigation":1683,"path":367,"seo":1684,"stem":368,"__hash__":1685},"docs_ru\u002Fru\u002Fdocs\u002F2.guides\u002F15.devtools.md",{"type":477,"value":478,"toc":1661},"minimark",[479,496,499,503,508,539,545,549,742,761,772,776,787,791,798,919,938,956,960,1009,1015,1019,1099,1102,1106,1109,1131,1134,1138,1151,1171,1181,1262,1265,1270,1413,1416,1419,1422,1450,1453,1456,1459,1554,1572,1576,1579,1646,1650,1657],[480,481,482,486,487,491,492,495],"p",{},[483,484,485],"code",{},"@vue-dnd-kit\u002Fdevtools"," добавляет вкладку ",[488,489,490],"strong",{},"Vue DnD Kit"," во Vue DevTools (",[483,493,494],{},"vite-plugin-vue-devtools",")\nи в Nuxt DevTools. Она показывает каждый список, дерево и цель на странице на живой мини-карте,\nперетаскивает любой элемент джойстиком, правит опции, пока приложение работает, и записывает, что\nсделал каждый драг. Она работает только в разработке: ничего из неё не попадает в\nпродакшен-сборку.",[480,497,498],{},"Вкладка — отдельная страница, которую раздаёт ваш dev-сервер рядом с приложением, поэтому внутри\nэтой документации она работать не может. Настройка — три шага.",[500,501,294],"h2",{"id":502},"install",[504,505,507],"h3",{"id":506},"_1-add-the-packages","1. Добавьте пакеты",[509,510,515],"pre",{"className":511,"code":512,"language":513,"meta":514,"style":514},"language-bash shiki shiki-themes dnd-light dnd-light dnd-dark","npm i -D @vue-dnd-kit\u002Fdevtools @vue-dnd-kit\u002Factions\n","bash","",[483,516,517],{"__ignoreMap":514},[518,519,522,526,530,533,536],"span",{"class":520,"line":521},"line",1,[518,523,525],{"class":524},"sbwC8","npm",[518,527,529],{"class":528},"sN8r7"," i",[518,531,532],{"class":528}," -D",[518,534,535],{"class":528}," @vue-dnd-kit\u002Fdevtools",[518,537,538],{"class":528}," @vue-dnd-kit\u002Factions\n",[480,540,541,544],{},[483,542,543],{},"@vue-dnd-kit\u002Factions"," — peer-зависимость: перемещения вкладки идут через неё. npm 7+ и pnpm\nустанавливают её сами; с Yarn 1 добавьте её.",[504,546,548],{"id":547},"_2-add-the-plugin","2. Добавьте плагин",[550,551,552,701],"code-group",{},[509,553,558],{"className":554,"code":555,"filename":556,"language":557,"meta":514,"style":514},"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",[483,559,560,586,602,617,636,643,658,665,695],{"__ignoreMap":514},[518,561,562,566,570,574,577,580,583],{"class":520,"line":521},[518,563,565],{"class":564},"s78Kj","import",[518,567,569],{"class":568},"s6cML"," {",[518,571,573],{"class":572},"snmWg"," defineConfig ",[518,575,576],{"class":568},"}",[518,578,579],{"class":564}," from",[518,581,582],{"class":528}," 'vite'",[518,584,585],{"class":568},";\n",[518,587,589,591,594,597,600],{"class":520,"line":588},2,[518,590,565],{"class":564},[518,592,593],{"class":572}," vue ",[518,595,596],{"class":564},"from",[518,598,599],{"class":528}," '@vitejs\u002Fplugin-vue'",[518,601,585],{"class":568},[518,603,605,607,610,612,615],{"class":520,"line":604},3,[518,606,565],{"class":564},[518,608,609],{"class":572}," vueDevTools ",[518,611,596],{"class":564},[518,613,614],{"class":528}," 'vite-plugin-vue-devtools'",[518,616,585],{"class":568},[518,618,620,622,624,627,629,631,634],{"class":520,"line":619},4,[518,621,565],{"class":564},[518,623,569],{"class":568},[518,625,626],{"class":572}," vueDnDKitDevtools ",[518,628,576],{"class":568},[518,630,579],{"class":564},[518,632,633],{"class":528}," '@vue-dnd-kit\u002Fdevtools\u002Fvite'",[518,635,585],{"class":568},[518,637,639],{"class":520,"line":638},5,[518,640,642],{"emptyLinePlaceholder":641},true,"\n",[518,644,646,649,652,655],{"class":520,"line":645},6,[518,647,648],{"class":564},"export",[518,650,651],{"class":564}," default",[518,653,654],{"class":524}," defineConfig",[518,656,657],{"class":568},"({\n",[518,659,661],{"class":520,"line":660},7,[518,662,664],{"class":663},"sytrG","  \u002F\u002F Next to the Vue DevTools plugin: the tab joins its sidebar.\n",[518,666,668,672,675,678,681,684,687,689,692],{"class":520,"line":667},8,[518,669,671],{"class":670},"sVvmN","  plugins",[518,673,674],{"class":568},":",[518,676,677],{"class":568}," [",[518,679,680],{"class":524},"vueDevTools",[518,682,683],{"class":568},"(),",[518,685,686],{"class":524}," vueDnDKitDevtools",[518,688,683],{"class":568},[518,690,691],{"class":524}," vue",[518,693,694],{"class":568},"()],\n",[518,696,698],{"class":520,"line":697},9,[518,699,700],{"class":568},"});\n",[509,702,705],{"className":554,"code":703,"filename":704,"language":557,"meta":514,"style":514},"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",[483,706,707,718,723,738],{"__ignoreMap":514},[518,708,709,711,713,716],{"class":520,"line":521},[518,710,648],{"class":564},[518,712,651],{"class":564},[518,714,715],{"class":524}," defineNuxtConfig",[518,717,657],{"class":568},[518,719,720],{"class":520,"line":588},[518,721,722],{"class":663},"  \u002F\u002F With @vue-dnd-kit\u002Fdevtools installed, the tab appears in development.\n",[518,724,725,728,730,732,735],{"class":520,"line":604},[518,726,727],{"class":670},"  modules",[518,729,674],{"class":568},[518,731,677],{"class":568},[518,733,734],{"class":528},"'@vue-dnd-kit\u002Fnuxt'",[518,736,737],{"class":568},"],\n",[518,739,740],{"class":520,"line":619},[518,741,700],{"class":568},[480,743,744,745,748,749,752,753,756,757,760],{},"С Vite плагин делает на dev-сервере (",[483,746,747],{},"vite serve",") три вещи: раздаёт вкладку по адресу\n",[483,750,751],{},"\u002F__vue-dnd-kit-devtools\u002F"," (внутри вашего ",[483,754,755],{},"base","), добавляет её во Vue DevTools и заставляет\nстраницу сообщать ей о себе до старта приложения. ",[483,758,759],{},"app.use()"," не нужен, а сборки не\nзатрагиваются.",[480,762,763,764,767,768,771],{},"С Nuxt модуль ",[483,765,766],{},"@vue-dnd-kit\u002Fnuxt"," находит пакет, раздаёт вкладку, добавляет её в Nuxt DevTools и\nустанавливает сторону страницы клиентским плагином. ",[483,769,770],{},"vueDndKit: { devtools: false }"," это\nотключает.",[504,773,775],{"id":774},"_3-run-the-app-in-development","3. Запустите приложение в режиме разработки",[480,777,778,779,782,783,786],{},"Запустите dev-сервер как обычно (",[483,780,781],{},"vite",", ",[483,784,785],{},"nuxt dev",") и откройте приложение: вкладка готова. В ней\nотображается каждый провайдер страницы, в каком бы приложении он ни рендерился.",[504,788,790],{"id":789},"without-the-plugins","Без плагинов",[480,792,793,794,797],{},"Для собственного dev-сервера или страницы, которую Vite раздаёт не из ",[483,795,796],{},"index.html"," (SSR-сетапы),\nустановите сторону страницы сами:",[509,799,802],{"className":554,"code":800,"filename":801,"language":557,"meta":514,"style":514},"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",[483,803,804,822,840,854,858,881,903],{"__ignoreMap":514},[518,805,806,808,810,813,815,817,820],{"class":520,"line":521},[518,807,565],{"class":564},[518,809,569],{"class":568},[518,811,812],{"class":572}," createApp ",[518,814,576],{"class":568},[518,816,579],{"class":564},[518,818,819],{"class":528}," 'vue'",[518,821,585],{"class":568},[518,823,824,826,828,831,833,835,838],{"class":520,"line":588},[518,825,565],{"class":564},[518,827,569],{"class":568},[518,829,830],{"class":572}," DnDDevtools ",[518,832,576],{"class":568},[518,834,579],{"class":564},[518,836,837],{"class":528}," '@vue-dnd-kit\u002Fdevtools'",[518,839,585],{"class":568},[518,841,842,844,847,849,852],{"class":520,"line":604},[518,843,565],{"class":564},[518,845,846],{"class":572}," App ",[518,848,596],{"class":564},[518,850,851],{"class":528}," '.\u002FApp.vue'",[518,853,585],{"class":568},[518,855,856],{"class":520,"line":619},[518,857,642],{"emptyLinePlaceholder":641},[518,859,860,863,866,869,872,875,878],{"class":520,"line":638},[518,861,862],{"class":564},"const",[518,864,865],{"class":572}," app ",[518,867,868],{"class":568},"=",[518,870,871],{"class":524}," createApp",[518,873,874],{"class":568},"(",[518,876,877],{"class":572},"App",[518,879,880],{"class":568},");\n",[518,882,883,886,889,892,894,897,900],{"class":520,"line":645},[518,884,885],{"class":524},"app",[518,887,888],{"class":568},".",[518,890,891],{"class":524},"use",[518,893,874],{"class":568},[518,895,896],{"class":572},"DnDDevtools",[518,898,899],{"class":568},");",[518,901,902],{"class":663}," \u002F\u002F before mount: providers set up earlier aren't seen\n",[518,904,905,907,909,912,914,917],{"class":520,"line":660},[518,906,885],{"class":524},[518,908,888],{"class":568},[518,910,911],{"class":524},"mount",[518,913,874],{"class":568},[518,915,916],{"class":528},"'#app'",[518,918,880],{"class":568},[480,920,921,922,925,926,929,930,933,934,937],{},"Или импортируйте ",[483,923,924],{},"@vue-dnd-kit\u002Fdevtools\u002Fauto"," первым во входном файле. Используйте\n",[483,927,928],{},"vueDnDKitDevtools({ inject: false })",", когда плагин должен раздавать вкладку, а сторону\nстраницы вы устанавливаете сами; ",[483,931,932],{},"serveTab()"," из ",[483,935,936],{},"@vue-dnd-kit\u002Fdevtools\u002Fvite"," — middleware,\nкоторое раздаёт вкладку.",[939,940,941],"note",{},[480,942,943,944,947,948,951,952,955],{},"В продакшен-сборке ",[483,945,946],{},"app.use(DnDDevtools)"," и импорт ",[483,949,950],{},"auto"," сжимаются почти в ничто: каждая точка\nвхода сначала проверяет ",[483,953,954],{},"process.env.NODE_ENV",", а бандлеры выбрасывают остальное. На сервере они\nничего не делают.",[500,957,959],{"id":958},"open-it","Как открыть",[961,962,963,984,999],"ul",{},[964,965,966,969,970,974,975,974,978,981,982,888],"li",{},[488,967,968],{},"Vue DevTools",": ",[971,972],"kbd",{"value":973},"Alt"," + ",[971,976],{"value":977},"Shift",[971,979],{"value":980},"D"," или кнопка Vue\nвнизу страницы, затем вкладка ",[488,983,490],{},[964,985,986,969,989,974,991,974,993,995,996,998],{},[488,987,988],{},"Nuxt DevTools",[971,990],{"value":973},[971,992],{"value":977},[971,994],{"value":980}," или кнопка Nuxt,\nзатем ",[488,997,490],{}," (в боковой панели или в её меню переполнения).",[964,1000,1001,1004,1005,1008],{},[488,1002,1003],{},"Отдельное окно",": откройте ",[483,1006,1007],{},"http:\u002F\u002Flocalhost:5173\u002F__vue-dnd-kit-devtools\u002F"," на своём\ndev-сервере или нажмите кнопку ⧉ вкладки. Удобно на втором экране. Если открыто несколько\nстраниц, селект сверху выбирает, за какой следить.",[1010,1011,1012],"warning",{},[480,1013,1014],{},"Держите вкладку в отдельном окне, а не в фоновой вкладке браузера того же окна: страница должна\nоставаться видимой, а скрытая страница отменяет драги.",[500,1016,1018],{"id":1017},"the-tab-at-a-glance","Вкладка вкратце",[1020,1021,1022,1035],"table",{},[1023,1024,1025],"thead",{},[1026,1027,1028,1032],"tr",{},[1029,1030,1031],"th",{},"Часть",[1029,1033,1034],{},"Что в ней",[1036,1037,1038,1055,1067,1082],"tbody",{},[1026,1039,1040,1044],{},[1041,1042,1043],"td",{},"Верхняя панель",[1041,1045,1046,1047,1050,1051,1054],{},"Что драг делает прямо сейчас (",[483,1048,1049],{},"dragging card-3 → done (accepts)","), отслеживаемая страница, ",[488,1052,1053],{},"⌖ Pick",", число изменённых опций со сбросом, ⧉ (отдельное окно) и тема.",[1026,1056,1057,1060],{},[1041,1058,1059],{},"Слева: реестр",[1041,1061,1062,1063,1066],{},"Каждый провайдер в виде дерева: его списки, деревья, цели и перетаскиваемые элементы. ",[488,1064,1065],{},"☰"," показывает или скрывает его.",[1026,1068,1069,1079],{},[1041,1070,1071,1072,1075,1076],{},"В центре: ",[488,1073,1074],{},"Map"," и ",[488,1077,1078],{},"Log",[1041,1080,1081],{},"Живая мини-карта страницы или журнал драгов.",[1026,1083,1084,1096],{},[1041,1085,1086,1087,782,1090,782,1093],{},"Справа: ",[488,1088,1089],{},"Drive",[488,1091,1092],{},"Options",[488,1094,1095],{},"State",[1041,1097,1098],{},"Джойстик и кнопки перемещения, опции выбранного узла и то, что о нём знает провайдер.",[480,1100,1101],{},"Выберите узел в реестре или элемент на карте, и правая часть следует за ним.",[500,1103,1105],{"id":1104},"the-mini-map","Мини-карта",[480,1107,1108],{},"Живая карточка на каждый список, дерево и цель, с копиями их элементов там, где они есть, — те же\nклоны, которые показал бы оверлей, со стилями страницы. Во время драга она отмечает:",[961,1110,1111,1122,1125],{},[964,1112,1113,1114,1117,1118,1121],{},"списки и цели, которые ",[488,1115,1116],{},"принимают"," драг (синие) или ",[488,1119,1120],{},"отклоняют"," его (красные);",[964,1123,1124],{},"плейсхолдер и цель под указателем;",[964,1126,1127,1128,888],{},"указатель, блок оверлея и линию вставки списков с ",[483,1129,1130],{},"placeholder: 'indicator'",[480,1132,1133],{},"Клик выбирает элемент и подсвечивает его на странице; двойной клик прокручивает к нему страницу.\nПользуйтесь картой, когда бросок попадает не туда, куда вы ждёте: она сразу показывает, какие\nсписки принимают драг.",[500,1135,1137],{"id":1136},"drive-the-joystick","Drive: джойстик",[480,1139,1140,1141,1143,1144,1075,1147,1150],{},"Выберите элемент — на карте, в реестре или через ",[488,1142,1053],{},", который перехватывает следующее\nнажатие на перетаскиваемый элемент страницы, не давая ему сработать, — и толкните рукоятку\nджойстика. Элемент берётся и движется в ту сторону, тем быстрее, чем дальше рукоятка от центра.\nОтпустите — и он остановится; ",[488,1145,1146],{},"Drop",[488,1148,1149],{},"Cancel"," завершают драг.",[480,1152,1153,1154,1157,1158,1163,1164,1075,1167,1170],{},"Это настоящий драг указателем от сенсора по имени ",[483,1155,1156],{},"devtools",", сделанный на публичном\n",[1159,1160,1162],"a",{"href":1161},"\u002Fdocs\u002Fguides\u002Fsensors#a-sensor-of-your-own","API сенсоров",": списки сортируются под ним, контейнеры\nпрокручиваются у краёв, а ",[483,1165,1166],{},"onBeforeDrop",[483,1168,1169],{},"onDrop"," выполняются, как для любого драга.\nОтключённые элементы не берутся. Перетаскиванием с клавиатуры, начатым на странице, тоже можно\nуправлять.",[480,1172,1173,1174,1180],{},"Элементы сортируемых списков получают ещё и кнопки: вверх, вниз, в начало, в конец, в другой\nсписок группы. Каждая — одно перетаскивание с клавиатуры через\n",[1159,1175,1177],{"href":1176},"\u002Fdocs\u002Fguides\u002Fsensors#programmatic-drags",[483,1178,1179],{},"moveItem",". Под джойстиком — крупная копия того, что\nпоказывает оверлей.",[1020,1182,1183,1193],{},[1023,1184,1185],{},[1026,1186,1187,1190],{},[1029,1188,1189],{},"Клавиша во вкладке",[1029,1191,1192],{},"Действие",[1036,1194,1195,1218,1228,1242,1252],{},[1026,1196,1197,1212],{},[1041,1198,1199,1200,1203,1204,1203,1207,1203,1210],{},"Стрелки или ",[971,1201],{"value":1202},"W"," ",[971,1205],{"value":1206},"A",[971,1208],{"value":1209},"S",[971,1211],{"value":980},[1041,1213,1214,1215,1217],{},"Толкнуть рукоятку в ту сторону, наполовину; с ",[971,1216],{"value":977}," — до упора",[1026,1219,1220,1225],{},[1041,1221,1222],{},[971,1223],{"value":1224},"G",[1041,1226,1227],{},"Взять выбранный элемент",[1026,1229,1230,1239],{},[1041,1231,1232,1235,1236],{},[971,1233],{"value":1234},"Space"," \u002F ",[971,1237],{"value":1238},"Enter",[1041,1240,1241],{},"Бросить",[1026,1243,1244,1249],{},[1041,1245,1246],{},[971,1247],{"value":1248},"Escape",[1041,1250,1251],{},"Отменить",[1026,1253,1254,1259],{},[1041,1255,1256],{},[971,1257],{"value":1258},"P",[1041,1260,1261],{},"Выбрать на странице",[500,1263,1092],{"id":1264},"options",[480,1266,1267,1268,674],{},"Каждую опцию, которая не является колбэком, можно править, пока приложение работает. Выберите\nузел и откройте ",[488,1269,1092],{},[1020,1271,1272,1282],{},[1023,1273,1274],{},[1026,1275,1276,1279],{},[1029,1277,1278],{},"Узел",[1029,1280,1281],{},"Опции",[1036,1283,1284,1325,1364,1382,1399],{},[1026,1285,1286,1288],{},[1041,1287,312],{},[1041,1289,1290,782,1293,782,1296,782,1299,1302,1303,782,1306,782,1309,782,1312,782,1315,782,1318,782,1321,1324],{},[483,1291,1292],{},"overlayFit",[483,1294,1295],{},"autoScroll",[483,1297,1298],{},"collision",[483,1300,1301],{},"modifiers"," (библиотечные, по имени), ",[483,1304,1305],{},"animation",[483,1307,1308],{},"dropAnimation",[483,1310,1311],{},"animateChanges",[483,1313,1314],{},"activation",[483,1316,1317],{},"keyboard",[483,1319,1320],{},"haptics",[483,1322,1323],{},"copyModifier","…",[1026,1326,1327,1330],{},[1041,1328,1329],{},"Список",[1041,1331,1332,782,1335,782,1338,782,1341,782,1344,782,1347,782,1350,782,1353,782,1356,782,1358,782,1360,782,1362],{},[483,1333,1334],{},"disabled",[483,1336,1337],{},"strategy",[483,1339,1340],{},"placeholder",[483,1342,1343],{},"behavior",[483,1345,1346],{},"multiple",[483,1348,1349],{},"sort",[483,1351,1352],{},"dropOutside",[483,1354,1355],{},"acceptMode",[483,1357,1305],{},[483,1359,1311],{},[483,1361,1295],{},[483,1363,1301],{},[1026,1365,1366,1369],{},[1041,1367,1368],{},"Дерево",[1041,1370,1371,782,1373,782,1376,782,1379,1324],{},[483,1372,1340],{},[483,1374,1375],{},"indentation",[483,1377,1378],{},"nesting",[483,1380,1381],{},"maxDepth",[1026,1383,1384,1387],{},[1041,1385,1386],{},"Цель",[1041,1388,1389,782,1391,782,1394,782,1397],{},[483,1390,1334],{},[483,1392,1393],{},"priority",[483,1395,1396],{},"accept",[483,1398,1355],{},[1026,1400,1401,1404],{},[1041,1402,1403],{},"Элемент",[1041,1405,1406,782,1408,782,1411],{},[483,1407,1334],{},[483,1409,1410],{},"keyboardMode",[483,1412,1314],{},[480,1414,1415],{},"Правка применяется сразу, только к этой странице, и никогда не записывается в ваш код: библиотека\nчитает новое значение там, где читает опцию. Она действует, пока вы её не сбросите (↺ у каждой\nопции или сброс на верхней панели), пока провайдер не размонтируется или страница не\nперезагрузится. Рядом с изменённой опцией показано значение из вашего кода. Элементы,\nсмонтированные, пока правка задана, — строки виртуального списка — тоже её получают.",[500,1417,1095],{"id":1418},"state",[480,1420,1421],{},"Что знает каждый провайдер о выбранном узле:",[961,1423,1424,1430,1440],{},[964,1425,1426,1429],{},[488,1427,1428],{},"сессия драга",": статус, активные id, элементы и сенсор, цель и принимает ли она, указатель,\nоверлей, сессия сортируемой группы и линия вставки;",[964,1431,1432,1435,1436,1439],{},[488,1433,1434],{},"список",": его порядок и черновик; ",[488,1437,1438],{},"дерево",": его строки;",[964,1441,1442,1445,1446,1449],{},[488,1443,1444],{},"элемент",": его тип, данные и позиция; ",[488,1447,1448],{},"цель",": её правила.",[480,1451,1452],{},"Элементы монтируются и размонтируются без событий: реестр догоняет их в течение секунды.",[500,1454,1078],{"id":1455},"log",[480,1457,1458],{},"Одна полоса на драг, по порядку:",[1020,1460,1461,1471],{},[1023,1462,1463],{},[1026,1464,1465,1468],{},[1029,1466,1467],{},"Запись",[1029,1469,1470],{},"Что сообщает",[1036,1472,1473,1483,1496,1508,1520,1537],{},[1026,1474,1475,1480],{},[1041,1476,1477],{},[483,1478,1479],{},"drag start",[1041,1481,1482],{},"Id, сенсор и было ли это касание, список, из которого пришёл элемент.",[1026,1484,1485,1493],{},[1041,1486,1487,782,1490],{},[483,1488,1489],{},"over",[483,1491,1492],{},"left",[1041,1494,1495],{},"Каждую цель, в которую вошёл и из которой вышел драг, и принимает ли она его.",[1026,1497,1498,1503],{},[1041,1499,1500],{},[483,1501,1502],{},"release",[1041,1504,1505,1506,888],{},"Цель, над которой драг отпущен, пока решает ",[483,1507,1166],{},[1026,1509,1510,1514],{},[1041,1511,1512],{},[483,1513,1166],{},[1041,1515,1516,1517,1519],{},"Вердикт: принято, принято частично, отклонено хуком, отклонено ",[483,1518,1396],{}," цели, и сколько заняли хуки.",[1026,1521,1522,1527],{},[1041,1523,1524],{},[483,1525,1526],{},"drop",[1041,1528,1529,1530,1533,1534,888],{},"Цель; для сортируемых списков — перемещение, ",[483,1531,1532],{},"e.result"," и был ли вызван ",[483,1535,1536],{},"preventDefault()",[1026,1538,1539,1544],{},[1041,1540,1541],{},[483,1542,1543],{},"cancel",[1041,1545,1546,1547,1550,1551,1553],{},"Причина: отменено (Escape, ",[483,1548,1549],{},"cancel()","), отклонено хуком или отклонено ",[483,1552,1396],{}," цели.",[480,1555,1556,1557,1075,1560,1563,1564,1567,1568,1571],{},"А также ",[483,1558,1559],{},"auto-scroll on",[483,1561,1562],{},"off",", тексты ",[483,1565,1566],{},"announcement"," (по умолчанию скрыты) и, вне драгов,\n",[483,1569,1570],{},"animate"," (изменения элементов списка, сделанные не драгом). Кликните по записи, чтобы увидеть её\nданные. Вкладка, открытая позже, получает уже прошедшие драги.",[500,1573,1575],{"id":1574},"debug-a-drop-step-by-step","Отладка броска по шагам",[480,1577,1578],{},"Карточка не попадает в колонку. С открытой вкладкой:",[1580,1581,1582,1591,1608,1629],"ol",{},[964,1583,1584,1587,1588,1590],{},[488,1585,1586],{},"Воспроизведите"," это руками или через ",[488,1589,1089],{},", чтобы руки оставались свободными для\nвкладки.",[964,1592,1593,1596,1597,1600,1601,1604,1605,1607],{},[488,1594,1595],{},"Следите за картой",", пока карточка над колонкой. Красный значит, что список отклоняет\nкарточку: смотрите его ",[483,1598,1599],{},"group"," (",[483,1602,1603],{},"put",") или ",[483,1606,1396],{}," цели. Синий значит, что он принимает, и\nпроблема возникает позже.",[964,1609,1610,1613,1614,1616,1617,1619,1620,1622,1623,1625,1626,1628],{},[488,1611,1612],{},"Прочитайте журнал"," этого драга. ",[483,1615,1166],{}," говорит, кто сказал «нет», — хук или\n",[483,1618,1396],{}," цели. Если бросок прошёл, а ваши данные не изменились, запись ",[483,1621,1526],{}," говорит, был ли\nвызван ",[483,1624,1536],{}," и что было в ",[483,1627,1532],{},": управляемый список должен применять его сам.",[964,1630,1631,1634,1635,1637,1638,1640,1641,782,1643,1645],{},[488,1632,1633],{},"Попробуйте исправление вживую"," в ",[488,1636,1092],{}," — более мягкий ",[483,1639,1355],{},", другой\n",[483,1642,1298],{},[483,1644,1130],{},", — а затем перенесите то, что сработало, в свой код.",[500,1647,1649],{"id":1648},"how-it-works","Как это работает",[480,1651,1652,1653,1656],{},"Провайдеры сообщают о себе хуку, который устанавливает сторона страницы. Пока за страницей не\nследит вкладка, они только записываются; затем страница слушает, как любой монитор, и отправляет\nвкладке то, что та показывает, — каждые 40 ms во время драга, дважды в секунду в остальное время,\n— и останавливается, когда несколько секунд за ней не следит ни одна вкладка. Вкладка общается со\nстраницей через ",[483,1654,1655],{},"BroadcastChannel"," origin страницы. Она не меняет ничего, кроме того, о чём вы\nпросите: драгов, выделения и переопределений опций.",[1658,1659,1660],"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":514,"searchDepth":604,"depth":604,"links":1662},[1663,1669,1670,1671,1672,1673,1674,1675,1676,1677],{"id":502,"depth":588,"text":294,"children":1664},[1665,1666,1667,1668],{"id":506,"depth":604,"text":507},{"id":547,"depth":604,"text":548},{"id":774,"depth":604,"text":775},{"id":789,"depth":604,"text":790},{"id":958,"depth":588,"text":959},{"id":1017,"depth":588,"text":1018},{"id":1104,"depth":588,"text":1105},{"id":1136,"depth":588,"text":1137},{"id":1264,"depth":588,"text":1092},{"id":1418,"depth":588,"text":1095},{"id":1455,"depth":588,"text":1078},{"id":1574,"depth":588,"text":1575},{"id":1648,"depth":588,"text":1649},"Вкладка Vue DnD Kit во Vue DevTools и Nuxt DevTools — живая мини-карта, джойстик, который перетаскивает по-настоящему, правка опций на лету и журнал каждого драга.","md",null,{"source":1682},"6f7e373d0b",{"icon":116},{"title":113,"description":1678},"hk1KVncliBU-zme86XRrIEUVaiBZNe0uyUQk9K0Gm1g",[1687,1689],{"title":363,"path":364,"stem":365,"description":1688,"icon":111},"Как ввод становится драгом — сенсоры указателя и клавиатуры, условия активации, canDrag, собственные сенсоры и драги, которые вы задаёте скриптом через @vue-dnd-kit\u002Factions.",{"title":370,"path":371,"stem":372,"description":1690,"icon":121},"Собственный drag and drop браузера как драги библиотеки — файлы, ссылки и текст из других приложений в цели и списки, которые освобождают для них место, элементы, вытащенные за пределы страницы, и перетаскивание между окнами вашего приложения.",1793707533010]