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