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