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