[{"data":1,"prerenderedAt":1691},["ShallowReactive",2],{"navigation-source":3,"navigation-de":271,"docs-\u002Fde\u002Fdocs\u002Fguides\u002Fdevtools":471,"docs-surround-\u002Fde\u002Fdocs\u002Fguides\u002Fdevtools":1686},[4],{"title":5,"path":6,"stem":7,"children":8,"page":35},"Docs","\u002Fdocs","docs",[9,36,122,198,251],{"title":10,"icon":11,"path":12,"stem":13,"children":14,"page":35},"Getting started","i-lucide-rocket","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[15,20,25,30],{"title":16,"path":17,"stem":18,"icon":19},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction","i-lucide-book-open",{"title":21,"path":22,"stem":23,"icon":24},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation","i-lucide-download",{"title":26,"path":27,"stem":28,"icon":29},"Quick start","\u002Fdocs\u002Fgetting-started\u002Fquick-start","docs\u002F1.getting-started\u002F3.quick-start","i-lucide-zap",{"title":31,"path":32,"stem":33,"icon":34},"Migrating from v2","\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2","docs\u002F1.getting-started\u002F4.migrating-from-v2","i-lucide-arrow-right-left",false,{"title":37,"icon":38,"path":39,"stem":40,"children":41,"page":35},"Guides","i-lucide-book-marked","\u002Fdocs\u002Fguides","docs\u002F2.guides",[42,47,52,57,62,67,72,77,82,87,92,97,102,107,112,117],{"title":43,"path":44,"stem":45,"icon":46},"The provider","\u002Fdocs\u002Fguides\u002Fprovider","docs\u002F2.guides\u002F01.provider","i-lucide-layers",{"title":48,"path":49,"stem":50,"icon":51},"Drag and drop","\u002Fdocs\u002Fguides\u002Fdrag-and-drop","docs\u002F2.guides\u002F02.drag-and-drop","i-lucide-move",{"title":53,"path":54,"stem":55,"icon":56},"Sortable lists","\u002Fdocs\u002Fguides\u002Fsortable-lists","docs\u002F2.guides\u002F03.sortable-lists","i-lucide-list-ordered",{"title":58,"path":59,"stem":60,"icon":61},"Lists that share items","\u002Fdocs\u002Fguides\u002Fshared-lists","docs\u002F2.guides\u002F04.shared-lists","i-lucide-kanban",{"title":63,"path":64,"stem":65,"icon":66},"Trees","\u002Fdocs\u002Fguides\u002Ftrees","docs\u002F2.guides\u002F05.trees","i-lucide-folder-tree",{"title":68,"path":69,"stem":70,"icon":71},"Multi-drag and selection","\u002Fdocs\u002Fguides\u002Fmulti-drag","docs\u002F2.guides\u002F06.multi-drag","i-lucide-copy",{"title":73,"path":74,"stem":75,"icon":76},"The overlay","\u002Fdocs\u002Fguides\u002Foverlay","docs\u002F2.guides\u002F07.overlay","i-lucide-mouse-pointer-2",{"title":78,"path":79,"stem":80,"icon":81},"Axes, bounds and grids","\u002Fdocs\u002Fguides\u002Fconstraints","docs\u002F2.guides\u002F08.constraints","i-lucide-axis-3d",{"title":83,"path":84,"stem":85,"icon":86},"Deciding a drop","\u002Fdocs\u002Fguides\u002Fdrop-decisions","docs\u002F2.guides\u002F09.drop-decisions","i-lucide-check-check",{"title":88,"path":89,"stem":90,"icon":91},"Animations","\u002Fdocs\u002Fguides\u002Fanimations","docs\u002F2.guides\u002F10.animations","i-lucide-sparkles",{"title":93,"path":94,"stem":95,"icon":96},"Accessibility","\u002Fdocs\u002Fguides\u002Faccessibility","docs\u002F2.guides\u002F11.accessibility","i-lucide-accessibility",{"title":98,"path":99,"stem":100,"icon":101},"Virtual lists","\u002Fdocs\u002Fguides\u002Fvirtual-lists","docs\u002F2.guides\u002F12.virtual-lists","i-lucide-rows-3",{"title":103,"path":104,"stem":105,"icon":106},"Styling","\u002Fdocs\u002Fguides\u002Fstyling","docs\u002F2.guides\u002F13.styling","i-lucide-palette",{"title":108,"path":109,"stem":110,"icon":111},"Sensors and programmatic drags","\u002Fdocs\u002Fguides\u002Fsensors","docs\u002F2.guides\u002F14.sensors","i-lucide-joystick",{"title":113,"path":114,"stem":115,"icon":116},"DevTools","\u002Fdocs\u002Fguides\u002Fdevtools","docs\u002F2.guides\u002F15.devtools","i-lucide-bug",{"title":118,"path":119,"stem":120,"icon":121},"Files and other apps","\u002Fdocs\u002Fguides\u002Fnative","docs\u002F2.guides\u002F16.native","i-lucide-app-window",{"title":123,"icon":124,"path":125,"stem":126,"children":127,"page":35},"API","i-lucide-braces","\u002Fdocs\u002Fapi","docs\u002F3.api",[128,133,137,142,146,151,156,161,166,171,175,180,184,188,193],{"title":129,"path":130,"stem":131,"icon":132},"DnDProvider","\u002Fdocs\u002Fapi\u002Fdnd-provider","docs\u002F3.api\u002F01.dnd-provider","i-lucide-box",{"title":134,"path":135,"stem":136,"icon":51},"makeDraggable","\u002Fdocs\u002Fapi\u002Fmake-draggable","docs\u002F3.api\u002F02.make-draggable",{"title":138,"path":139,"stem":140,"icon":141},"makeDroppable","\u002Fdocs\u002Fapi\u002Fmake-droppable","docs\u002F3.api\u002F03.make-droppable","i-lucide-inbox",{"title":143,"path":144,"stem":145,"icon":56},"makeSortableList","\u002Fdocs\u002Fapi\u002Fmake-sortable-list","docs\u002F3.api\u002F04.make-sortable-list",{"title":147,"path":148,"stem":149,"icon":150},"makeSortableItem","\u002Fdocs\u002Fapi\u002Fmake-sortable-item","docs\u002F3.api\u002F05.make-sortable-item","i-lucide-grip-vertical",{"title":152,"path":153,"stem":154,"icon":155},"makeSortableTree","\u002Fdocs\u002Fapi\u002Fmake-sortable-tree","docs\u002F3.api\u002F06.make-sortable-tree","i-lucide-list-tree",{"title":157,"path":158,"stem":159,"icon":160},"makeSelectionArea","\u002Fdocs\u002Fapi\u002Fmake-selection-area","docs\u002F3.api\u002F07.make-selection-area","i-lucide-square-dashed-mouse-pointer",{"title":162,"path":163,"stem":164,"icon":165},"makeDragArea","\u002Fdocs\u002Fapi\u002Fmake-drag-area","docs\u002F3.api\u002F08.make-drag-area","i-lucide-frame",{"title":167,"path":168,"stem":169,"icon":170},"useDnD and monitors","\u002Fdocs\u002Fapi\u002Fuse-dnd","docs\u002F3.api\u002F09.use-dnd","i-lucide-radio",{"title":172,"path":173,"stem":174,"icon":29},"Events","\u002Fdocs\u002Fapi\u002Fevents","docs\u002F3.api\u002F10.events",{"title":176,"path":177,"stem":178,"icon":179},"Modifiers and collision","\u002Fdocs\u002Fapi\u002Fmodifiers","docs\u002F3.api\u002F11.modifiers","i-lucide-sliders-horizontal",{"title":181,"path":182,"stem":183,"icon":71},"DragPreview and overlay props","\u002Fdocs\u002Fapi\u002Fdrag-preview","docs\u002F3.api\u002F12.drag-preview",{"title":88,"path":185,"stem":186,"icon":187},"\u002Fdocs\u002Fapi\u002Fanimations","docs\u002F3.api\u002F13.animations","i-lucide-wand-sparkles",{"title":189,"path":190,"stem":191,"icon":192},"Sensors","\u002Fdocs\u002Fapi\u002Fsensors","docs\u002F3.api\u002F14.sensors","i-lucide-gamepad-2",{"title":194,"path":195,"stem":196,"icon":197},"Common types","\u002Fdocs\u002Fapi\u002Ftypes","docs\u002F3.api\u002F15.types","i-lucide-shapes",{"title":199,"path":200,"stem":201,"children":202,"icon":205},"Examples","\u002Fdocs\u002Fexamples","docs\u002F4.examples\u002F00.index",[203,206,211,216,221,226,231,236,241,246],{"title":204,"path":200,"stem":201,"icon":205},"Overview","i-lucide-layout-grid",{"title":207,"path":208,"stem":209,"icon":210},"Project board","\u002Fdocs\u002Fexamples\u002Fboard","docs\u002F4.examples\u002F01.board","i-lucide-square-kanban",{"title":212,"path":213,"stem":214,"icon":215},"Week calendar","\u002Fdocs\u002Fexamples\u002Fcalendar","docs\u002F4.examples\u002F02.calendar","i-lucide-calendar-days",{"title":217,"path":218,"stem":219,"icon":220},"File manager","\u002Fdocs\u002Fexamples\u002Ffile-manager","docs\u002F4.examples\u002F03.file-manager","i-lucide-folder-open",{"title":222,"path":223,"stem":224,"icon":225},"Block editor","\u002Fdocs\u002Fexamples\u002Fblock-editor","docs\u002F4.examples\u002F04.block-editor","i-lucide-blocks",{"title":227,"path":228,"stem":229,"icon":230},"Chess","\u002Fdocs\u002Fexamples\u002Fchess","docs\u002F4.examples\u002F05.chess","i-lucide-chess-knight",{"title":232,"path":233,"stem":234,"icon":235},"Form builder","\u002Fdocs\u002Fexamples\u002Fform-builder","docs\u002F4.examples\u002F06.form-builder","i-lucide-text-cursor-input",{"title":237,"path":238,"stem":239,"icon":240},"Design canvas","\u002Fdocs\u002Fexamples\u002Fdesign-canvas","docs\u002F4.examples\u002F07.design-canvas","i-lucide-pen-tool",{"title":242,"path":243,"stem":244,"icon":245},"Page builder","\u002Fdocs\u002Fexamples\u002Fpage-builder","docs\u002F4.examples\u002F08.page-builder","i-lucide-layout-template",{"title":247,"path":248,"stem":249,"icon":250},"Data table","\u002Fdocs\u002Fexamples\u002Fdata-table","docs\u002F4.examples\u002F09.data-table","i-lucide-table-2",{"title":252,"path":253,"stem":254,"children":255,"icon":257},"Changelog","\u002Fdocs\u002Fchangelog","docs\u002F5.changelog\u002F0.index",[256,258,263,267],{"title":204,"path":253,"stem":254,"icon":257},"i-lucide-history",{"title":259,"path":260,"stem":261,"icon":262},"3.0.0","\u002Fdocs\u002Fchangelog\u002Fv3-0-0","docs\u002F5.changelog\u002F997.v3-0-0","i-lucide-tag",{"title":264,"path":265,"stem":266,"icon":262},"3.0.0-beta.2","\u002Fdocs\u002Fchangelog\u002Fv3-0-0-beta-2","docs\u002F5.changelog\u002F998.v3-0-0-beta-2",{"title":268,"path":269,"stem":270,"icon":262},"3.0.0-beta.1","\u002Fdocs\u002Fchangelog\u002Fv3-0-0-beta-1","docs\u002F5.changelog\u002F999.v3-0-0-beta-1",[272],{"title":273,"path":274,"stem":275,"children":276,"page":35},"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":113,"body":474,"category":305,"description":1678,"extension":1679,"links":1680,"meta":1681,"navigation":1683,"path":366,"seo":1684,"stem":367,"__hash__":1685},"docs_de\u002Fde\u002Fdocs\u002F2.guides\u002F15.devtools.md",{"type":475,"value":476,"toc":1661},"minimark",[477,494,497,501,506,537,543,547,740,759,770,774,785,789,796,917,936,954,958,1007,1013,1017,1097,1100,1104,1107,1129,1132,1136,1149,1169,1179,1260,1263,1268,1412,1415,1418,1421,1448,1451,1454,1457,1554,1572,1576,1579,1646,1650,1657],[478,479,480,484,485,488,489,493],"p",{},[481,482,483],"code",{},"@vue-dnd-kit\u002Fdevtools"," fügt den Vue DevTools (",[481,486,487],{},"vite-plugin-vue-devtools",") und den Nuxt DevTools\neinen Tab ",[490,491,492],"strong",{},"Vue DnD Kit"," hinzu. Er zeigt jede Liste, jeden Baum und jedes Drop-Ziel der Seite auf\neiner Live-Minikarte, zieht jedes Element mit einem Joystick, bearbeitet Optionen, während die App\nläuft, und protokolliert, was jeder Drag getan hat. Er funktioniert nur in der Entwicklung: Nichts\ndavon gelangt in einen Produktions-Build.",[478,495,496],{},"Der Tab ist eine eigene Seite, die dein Dev-Server neben deiner App ausliefert, deshalb kann er\nnicht in dieser Dokumentation laufen. Drei Schritte richten ihn ein.",[498,499,21],"h2",{"id":500},"install",[502,503,505],"h3",{"id":504},"_1-add-the-packages","1. Die Pakete hinzufügen",[507,508,513],"pre",{"className":509,"code":510,"language":511,"meta":512,"style":512},"language-bash shiki shiki-themes dnd-light dnd-light dnd-dark","npm i -D @vue-dnd-kit\u002Fdevtools @vue-dnd-kit\u002Factions\n","bash","",[481,514,515],{"__ignoreMap":512},[516,517,520,524,528,531,534],"span",{"class":518,"line":519},"line",1,[516,521,523],{"class":522},"sbwC8","npm",[516,525,527],{"class":526},"sN8r7"," i",[516,529,530],{"class":526}," -D",[516,532,533],{"class":526}," @vue-dnd-kit\u002Fdevtools",[516,535,536],{"class":526}," @vue-dnd-kit\u002Factions\n",[478,538,539,542],{},[481,540,541],{},"@vue-dnd-kit\u002Factions"," ist eine Peer-Dependency: Die Bewegungen des Tabs laufen darüber. npm 7+\nund pnpm installieren es von selbst; mit Yarn 1 füge es hinzu.",[502,544,546],{"id":545},"_2-add-the-plugin","2. Das Plugin hinzufügen",[548,549,550,699],"code-group",{},[507,551,556],{"className":552,"code":553,"filename":554,"language":555,"meta":512,"style":512},"language-ts shiki shiki-themes dnd-light dnd-light dnd-dark","import { defineConfig } from 'vite';\nimport vue from '@vitejs\u002Fplugin-vue';\nimport vueDevTools from 'vite-plugin-vue-devtools';\nimport { vueDnDKitDevtools } from '@vue-dnd-kit\u002Fdevtools\u002Fvite';\n\nexport default defineConfig({\n  \u002F\u002F Next to the Vue DevTools plugin: the tab joins its sidebar.\n  plugins: [vueDevTools(), vueDnDKitDevtools(), vue()],\n});\n","vite.config.ts","ts",[481,557,558,584,600,615,634,641,656,663,693],{"__ignoreMap":512},[516,559,560,564,568,572,575,578,581],{"class":518,"line":519},[516,561,563],{"class":562},"s78Kj","import",[516,565,567],{"class":566},"s6cML"," {",[516,569,571],{"class":570},"snmWg"," defineConfig ",[516,573,574],{"class":566},"}",[516,576,577],{"class":562}," from",[516,579,580],{"class":526}," 'vite'",[516,582,583],{"class":566},";\n",[516,585,587,589,592,595,598],{"class":518,"line":586},2,[516,588,563],{"class":562},[516,590,591],{"class":570}," vue ",[516,593,594],{"class":562},"from",[516,596,597],{"class":526}," '@vitejs\u002Fplugin-vue'",[516,599,583],{"class":566},[516,601,603,605,608,610,613],{"class":518,"line":602},3,[516,604,563],{"class":562},[516,606,607],{"class":570}," vueDevTools ",[516,609,594],{"class":562},[516,611,612],{"class":526}," 'vite-plugin-vue-devtools'",[516,614,583],{"class":566},[516,616,618,620,622,625,627,629,632],{"class":518,"line":617},4,[516,619,563],{"class":562},[516,621,567],{"class":566},[516,623,624],{"class":570}," vueDnDKitDevtools ",[516,626,574],{"class":566},[516,628,577],{"class":562},[516,630,631],{"class":526}," '@vue-dnd-kit\u002Fdevtools\u002Fvite'",[516,633,583],{"class":566},[516,635,637],{"class":518,"line":636},5,[516,638,640],{"emptyLinePlaceholder":639},true,"\n",[516,642,644,647,650,653],{"class":518,"line":643},6,[516,645,646],{"class":562},"export",[516,648,649],{"class":562}," default",[516,651,652],{"class":522}," defineConfig",[516,654,655],{"class":566},"({\n",[516,657,659],{"class":518,"line":658},7,[516,660,662],{"class":661},"sytrG","  \u002F\u002F Next to the Vue DevTools plugin: the tab joins its sidebar.\n",[516,664,666,670,673,676,679,682,685,687,690],{"class":518,"line":665},8,[516,667,669],{"class":668},"sVvmN","  plugins",[516,671,672],{"class":566},":",[516,674,675],{"class":566}," [",[516,677,678],{"class":522},"vueDevTools",[516,680,681],{"class":566},"(),",[516,683,684],{"class":522}," vueDnDKitDevtools",[516,686,681],{"class":566},[516,688,689],{"class":522}," vue",[516,691,692],{"class":566},"()],\n",[516,694,696],{"class":518,"line":695},9,[516,697,698],{"class":566},"});\n",[507,700,703],{"className":552,"code":701,"filename":702,"language":555,"meta":512,"style":512},"export default defineNuxtConfig({\n  \u002F\u002F With @vue-dnd-kit\u002Fdevtools installed, the tab appears in development.\n  modules: ['@vue-dnd-kit\u002Fnuxt'],\n});\n","nuxt.config.ts",[481,704,705,716,721,736],{"__ignoreMap":512},[516,706,707,709,711,714],{"class":518,"line":519},[516,708,646],{"class":562},[516,710,649],{"class":562},[516,712,713],{"class":522}," defineNuxtConfig",[516,715,655],{"class":566},[516,717,718],{"class":518,"line":586},[516,719,720],{"class":661},"  \u002F\u002F With @vue-dnd-kit\u002Fdevtools installed, the tab appears in development.\n",[516,722,723,726,728,730,733],{"class":518,"line":602},[516,724,725],{"class":668},"  modules",[516,727,672],{"class":566},[516,729,675],{"class":566},[516,731,732],{"class":526},"'@vue-dnd-kit\u002Fnuxt'",[516,734,735],{"class":566},"],\n",[516,737,738],{"class":518,"line":617},[516,739,698],{"class":566},[478,741,742,743,746,747,750,751,754,755,758],{},"Mit Vite tut das Plugin auf dem Dev-Server (",[481,744,745],{},"vite serve",") drei Dinge: Es liefert den Tab unter\n",[481,748,749],{},"\u002F__vue-dnd-kit-devtools\u002F"," aus (unterhalb deiner ",[481,752,753],{},"base","), fügt ihn den Vue DevTools hinzu und\nsorgt dafür, dass die Seite ihm berichtet, bevor deine App startet. Kein ",[481,756,757],{},"app.use()"," nötig, und\nBuilds bleiben unberührt.",[478,760,761,762,765,766,769],{},"Mit Nuxt findet das Modul ",[481,763,764],{},"@vue-dnd-kit\u002Fnuxt"," das Paket, liefert den Tab aus, fügt ihn den Nuxt\nDevTools hinzu und installiert den Teil auf der Seite mit einem Client-Plugin.\n",[481,767,768],{},"vueDndKit: { devtools: false }"," schaltet das ab.",[502,771,773],{"id":772},"_3-run-the-app-in-development","3. Die App in der Entwicklung starten",[478,775,776,777,780,781,784],{},"Starte den Dev-Server wie gewohnt (",[481,778,779],{},"vite",", ",[481,782,783],{},"nuxt dev",") und öffne die App: Der Tab ist bereit. Jeder\nProvider der Seite erscheint darin, egal in welcher App er rendert.",[502,786,788],{"id":787},"without-the-plugins","Ohne die Plugins",[478,790,791,792,795],{},"Für einen eigenen Dev-Server oder eine Seite, die Vite nicht aus einer ",[481,793,794],{},"index.html"," ausliefert\n(SSR-Setups), installiere den Teil auf der Seite selbst:",[507,797,800],{"className":552,"code":798,"filename":799,"language":555,"meta":512,"style":512},"import { createApp } from 'vue';\nimport { DnDDevtools } from '@vue-dnd-kit\u002Fdevtools';\nimport App from '.\u002FApp.vue';\n\nconst app = createApp(App);\napp.use(DnDDevtools); \u002F\u002F before mount: providers set up earlier aren't seen\napp.mount('#app');\n","main.ts",[481,801,802,820,838,852,856,879,901],{"__ignoreMap":512},[516,803,804,806,808,811,813,815,818],{"class":518,"line":519},[516,805,563],{"class":562},[516,807,567],{"class":566},[516,809,810],{"class":570}," createApp ",[516,812,574],{"class":566},[516,814,577],{"class":562},[516,816,817],{"class":526}," 'vue'",[516,819,583],{"class":566},[516,821,822,824,826,829,831,833,836],{"class":518,"line":586},[516,823,563],{"class":562},[516,825,567],{"class":566},[516,827,828],{"class":570}," DnDDevtools ",[516,830,574],{"class":566},[516,832,577],{"class":562},[516,834,835],{"class":526}," '@vue-dnd-kit\u002Fdevtools'",[516,837,583],{"class":566},[516,839,840,842,845,847,850],{"class":518,"line":602},[516,841,563],{"class":562},[516,843,844],{"class":570}," App ",[516,846,594],{"class":562},[516,848,849],{"class":526}," '.\u002FApp.vue'",[516,851,583],{"class":566},[516,853,854],{"class":518,"line":617},[516,855,640],{"emptyLinePlaceholder":639},[516,857,858,861,864,867,870,873,876],{"class":518,"line":636},[516,859,860],{"class":562},"const",[516,862,863],{"class":570}," app ",[516,865,866],{"class":566},"=",[516,868,869],{"class":522}," createApp",[516,871,872],{"class":566},"(",[516,874,875],{"class":570},"App",[516,877,878],{"class":566},");\n",[516,880,881,884,887,890,892,895,898],{"class":518,"line":643},[516,882,883],{"class":522},"app",[516,885,886],{"class":566},".",[516,888,889],{"class":522},"use",[516,891,872],{"class":566},[516,893,894],{"class":570},"DnDDevtools",[516,896,897],{"class":566},");",[516,899,900],{"class":661}," \u002F\u002F before mount: providers set up earlier aren't seen\n",[516,902,903,905,907,910,912,915],{"class":518,"line":658},[516,904,883],{"class":522},[516,906,886],{"class":566},[516,908,909],{"class":522},"mount",[516,911,872],{"class":566},[516,913,914],{"class":526},"'#app'",[516,916,878],{"class":566},[478,918,919,920,923,924,927,928,931,932,935],{},"Oder importiere ",[481,921,922],{},"@vue-dnd-kit\u002Fdevtools\u002Fauto"," als Erstes in der Einstiegsdatei. Nimm\n",[481,925,926],{},"vueDnDKitDevtools({ inject: false })",", wenn das Plugin den Tab ausliefern soll, du den Teil auf der\nSeite aber selbst installierst; ",[481,929,930],{},"serveTab()"," aus ",[481,933,934],{},"@vue-dnd-kit\u002Fdevtools\u002Fvite"," ist die Middleware,\ndie den Tab ausliefert.",[937,938,939],"note",{},[478,940,941,942,945,946,949,950,953],{},"In einem Produktions-Build schrumpfen ",[481,943,944],{},"app.use(DnDDevtools)"," und der ",[481,947,948],{},"auto","-Import auf fast\nnichts: Jeder Einstiegspunkt prüft zuerst ",[481,951,952],{},"process.env.NODE_ENV",", und Bundler werfen den Rest weg.\nAuf dem Server tun sie nichts.",[498,955,957],{"id":956},"open-it","Öffnen",[959,960,961,982,997],"ul",{},[962,963,964,967,968,972,973,972,976,979,980,886],"li",{},[490,965,966],{},"Vue DevTools",": ",[969,970],"kbd",{"value":971},"Alt"," + ",[969,974],{"value":975},"Shift",[969,977],{"value":978},"D"," oder der Vue-Button\nunten auf der Seite, dann der Tab ",[490,981,492],{},[962,983,984,967,987,972,989,972,991,993,994,996],{},[490,985,986],{},"Nuxt DevTools",[969,988],{"value":971},[969,990],{"value":975},[969,992],{"value":978}," oder der\nNuxt-Button, dann ",[490,995,492],{}," (in der Seitenleiste oder ihrem Überlaufmenü).",[962,998,999,1002,1003,1006],{},[490,1000,1001],{},"Ein eigenes Fenster",": Öffne ",[481,1004,1005],{},"http:\u002F\u002Flocalhost:5173\u002F__vue-dnd-kit-devtools\u002F"," auf deinem\nDev-Server oder nutze den ⧉-Button des Tabs. Praktisch auf einem zweiten Bildschirm. Sind mehrere\nSeiten offen, wählt ein Select oben die, die beobachtet wird.",[1008,1009,1010],"warning",{},[478,1011,1012],{},"Halte den Tab in einem eigenen Fenster, nicht in einem Hintergrund-Tab desselben Browserfensters:\nDie Seite muss sichtbar bleiben, und eine verborgene Seite bricht Drags ab.",[498,1014,1016],{"id":1015},"the-tab-at-a-glance","Der Tab im Überblick",[1018,1019,1020,1033],"table",{},[1021,1022,1023],"thead",{},[1024,1025,1026,1030],"tr",{},[1027,1028,1029],"th",{},"Teil",[1027,1031,1032],{},"Was er enthält",[1034,1035,1036,1053,1065,1080],"tbody",{},[1024,1037,1038,1042],{},[1039,1040,1041],"td",{},"Obere Leiste",[1039,1043,1044,1045,1048,1049,1052],{},"Was der Drag gerade tut (",[481,1046,1047],{},"dragging card-3 → done (accepts)","), die beobachtete Seite, ",[490,1050,1051],{},"⌖ Pick",", die Anzahl bearbeiteter Optionen mit einem Reset, ⧉ (ein eigenes Fenster) und das Theme.",[1024,1054,1055,1058],{},[1039,1056,1057],{},"Links: die Registry",[1039,1059,1060,1061,1064],{},"Jeder Provider als Baum: seine Listen, Bäume, Drop-Ziele und ziehbaren Elemente. ",[490,1062,1063],{},"☰"," blendet sie ein oder aus.",[1024,1066,1067,1077],{},[1039,1068,1069,1070,1073,1074],{},"Mitte: ",[490,1071,1072],{},"Map"," und ",[490,1075,1076],{},"Log",[1039,1078,1079],{},"Die Live-Minikarte der Seite oder das Log der Drags.",[1024,1081,1082,1094],{},[1039,1083,1084,1085,780,1088,780,1091],{},"Rechts: ",[490,1086,1087],{},"Drive",[490,1089,1090],{},"Options",[490,1092,1093],{},"State",[1039,1095,1096],{},"Der Joystick und die Buttons zum Verschieben, die Optionen des gewählten Knotens und was der Provider darüber weiß.",[478,1098,1099],{},"Wähle einen Knoten in der Registry oder ein Element auf der Karte, und die rechte Seite folgt ihm.",[498,1101,1103],{"id":1102},"the-mini-map","Die Minikarte",[478,1105,1106],{},"Eine Live-Karte pro Liste, Baum und Drop-Ziel, mit Kopien ihrer Elemente dort, wo sie sind –\ndieselben Klone, die das Overlay zeigen würde, mit dem CSS der Seite. Während eines Drags markiert\nsie:",[959,1108,1109,1120,1123],{},[962,1110,1111,1112,1115,1116,1119],{},"die Listen und Ziele, die den Drag ",[490,1113,1114],{},"annehmen"," (blau) oder ",[490,1117,1118],{},"ablehnen"," (rot);",[962,1121,1122],{},"den Platzhalter und das Ziel unter dem Zeiger;",[962,1124,1125,1126,886],{},"den Zeiger, die Box des Overlays und die Einfügelinie von Listen mit ",[481,1127,1128],{},"placeholder: 'indicator'",[478,1130,1131],{},"Ein Klick wählt ein Element und hebt es auf der Seite hervor; ein Doppelklick scrollt die Seite\ndorthin. Nutze die Karte, wenn ein Drop nicht dort landet, wo du es erwartest: Sie zeigt auf einen\nBlick, welche Listen den Drag annehmen.",[498,1133,1135],{"id":1134},"drive-the-joystick","Drive: der Joystick",[478,1137,1138,1139,1141,1142,1073,1145,1148],{},"Wähle ein Element – auf der Karte, in der Registry oder mit ",[490,1140,1051],{},", das das nächste Drücken auf\nein ziehbares Element der Seite abfängt, statt es wirken zu lassen – und drück den Knauf des\nJoysticks. Das Element wird aufgenommen und bewegt sich in diese Richtung, umso schneller, je\nweiter der Knauf von der Mitte entfernt ist. Lass los, und es hält an; ",[490,1143,1144],{},"Drop",[490,1146,1147],{},"Cancel","\nbeenden den Drag.",[478,1150,1151,1152,1155,1156,1161,1162,1073,1165,1168],{},"Es ist ein echter Drag per Zeiger von einem Sensor namens ",[481,1153,1154],{},"devtools",", gebaut mit der öffentlichen\n",[1157,1158,1160],"a",{"href":1159},"\u002Fdocs\u002Fguides\u002Fsensors#a-sensor-of-your-own","Sensor-API",": Listen sortieren sich darunter, Container\nscrollen an ihren Rändern, und ",[481,1163,1164],{},"onBeforeDrop",[481,1166,1167],{},"onDrop"," laufen wie bei jedem Drag. Deaktivierte\nElemente werden nicht aufgenommen. Auch ein Drag per Tastatur, den die Seite gestartet hat, lässt\nsich steuern.",[478,1170,1171,1172,1178],{},"Elemente sortierbarer Listen bekommen zusätzlich Buttons: nach oben, nach unten, an den Anfang, ans\nEnde, in eine andere Liste der Gruppe. Jeder ist ein Drag per Tastatur mit\n",[1157,1173,1175],{"href":1174},"\u002Fdocs\u002Fguides\u002Fsensors#programmatic-drags",[481,1176,1177],{},"moveItem",". Unter dem Joystick eine große Kopie dessen,\nwas das Overlay zeigt.",[1018,1180,1181,1191],{},[1021,1182,1183],{},[1024,1184,1185,1188],{},[1027,1186,1187],{},"Taste im Tab",[1027,1189,1190],{},"Wirkung",[1034,1192,1193,1216,1226,1240,1250],{},[1024,1194,1195,1210],{},[1039,1196,1197,1198,1201,1202,1201,1205,1201,1208],{},"Pfeiltasten oder ",[969,1199],{"value":1200},"W"," ",[969,1203],{"value":1204},"A",[969,1206],{"value":1207},"S",[969,1209],{"value":978},[1039,1211,1212,1213,1215],{},"Den Knauf in diese Richtung drücken, halb; mit ",[969,1214],{"value":975}," ganz",[1024,1217,1218,1223],{},[1039,1219,1220],{},[969,1221],{"value":1222},"G",[1039,1224,1225],{},"Das gewählte Element aufnehmen",[1024,1227,1228,1237],{},[1039,1229,1230,1233,1234],{},[969,1231],{"value":1232},"Space"," \u002F ",[969,1235],{"value":1236},"Enter",[1039,1238,1239],{},"Ablegen",[1024,1241,1242,1247],{},[1039,1243,1244],{},[969,1245],{"value":1246},"Escape",[1039,1248,1249],{},"Abbrechen",[1024,1251,1252,1257],{},[1039,1253,1254],{},[969,1255],{"value":1256},"P",[1039,1258,1259],{},"Auf der Seite auswählen",[498,1261,1090],{"id":1262},"options",[478,1264,1265,1266,672],{},"Jede Option, die kein Callback ist, lässt sich bearbeiten, während die App läuft. Wähle den Knoten\nund öffne ",[490,1267,1090],{},[1018,1269,1270,1280],{},[1021,1271,1272],{},[1024,1273,1274,1277],{},[1027,1275,1276],{},"Knoten",[1027,1278,1279],{},"Optionen",[1034,1281,1282,1324,1363,1381,1398],{},[1024,1283,1284,1287],{},[1039,1285,1286],{},"Provider",[1039,1288,1289,780,1292,780,1295,780,1298,1301,1302,780,1305,780,1308,780,1311,780,1314,780,1317,780,1320,1323],{},[481,1290,1291],{},"overlayFit",[481,1293,1294],{},"autoScroll",[481,1296,1297],{},"collision",[481,1299,1300],{},"modifiers"," (die der Bibliothek, nach Namen), ",[481,1303,1304],{},"animation",[481,1306,1307],{},"dropAnimation",[481,1309,1310],{},"animateChanges",[481,1312,1313],{},"activation",[481,1315,1316],{},"keyboard",[481,1318,1319],{},"haptics",[481,1321,1322],{},"copyModifier"," …",[1024,1325,1326,1329],{},[1039,1327,1328],{},"Liste",[1039,1330,1331,780,1334,780,1337,780,1340,780,1343,780,1346,780,1349,780,1352,780,1355,780,1357,780,1359,780,1361],{},[481,1332,1333],{},"disabled",[481,1335,1336],{},"strategy",[481,1338,1339],{},"placeholder",[481,1341,1342],{},"behavior",[481,1344,1345],{},"multiple",[481,1347,1348],{},"sort",[481,1350,1351],{},"dropOutside",[481,1353,1354],{},"acceptMode",[481,1356,1304],{},[481,1358,1310],{},[481,1360,1294],{},[481,1362,1300],{},[1024,1364,1365,1368],{},[1039,1366,1367],{},"Baum",[1039,1369,1370,780,1372,780,1375,780,1378,1323],{},[481,1371,1339],{},[481,1373,1374],{},"indentation",[481,1376,1377],{},"nesting",[481,1379,1380],{},"maxDepth",[1024,1382,1383,1386],{},[1039,1384,1385],{},"Drop-Ziel",[1039,1387,1388,780,1390,780,1393,780,1396],{},[481,1389,1333],{},[481,1391,1392],{},"priority",[481,1394,1395],{},"accept",[481,1397,1354],{},[1024,1399,1400,1403],{},[1039,1401,1402],{},"Element",[1039,1404,1405,780,1407,780,1410],{},[481,1406,1333],{},[481,1408,1409],{},"keyboardMode",[481,1411,1313],{},[478,1413,1414],{},"Eine Änderung gilt sofort, nur für diese Seite, und wird nie in deinen Code geschrieben: Die\nBibliothek liest den neuen Wert dort, wo sie die Option liest. Sie gilt, bis du sie zurücksetzt (↺\npro Option oder der Reset in der oberen Leiste), der Provider unmountet oder die Seite neu lädt.\nNeben einer bearbeiteten Option steht der Wert aus deinem Code. Elemente, die gemountet werden,\nwährend eine Änderung gesetzt ist – Zeilen einer virtuellen Liste –, bekommen sie auch.",[498,1416,1093],{"id":1417},"state",[478,1419,1420],{},"Was jeder Provider über den gewählten Knoten weiß:",[959,1422,1423,1430,1439],{},[962,1424,1425,1426,1429],{},"die ",[490,1427,1428],{},"Drag-Sitzung",": Status, die aktiven IDs, Elemente und der Sensor, das Ziel und ob es\nannimmt, der Zeiger, das Overlay, die Sitzung der sortierbaren Gruppe und die Einfügelinie;",[962,1431,1432,1433,1435,1436,1438],{},"eine ",[490,1434,1328],{},": ihre Reihenfolge und ihr Entwurf; ein ",[490,1437,1367],{},": seine Zeilen;",[962,1440,1441,1442,1444,1445,1447],{},"ein ",[490,1443,1402],{},": sein Typ, seine Daten und seine Position; ein ",[490,1446,1385],{},": seine Regeln.",[478,1449,1450],{},"Elemente mounten und unmounten ohne Events: Die Registry holt das innerhalb einer Sekunde auf.",[498,1452,1076],{"id":1453},"log",[478,1455,1456],{},"Ein Band pro Drag, der Reihe nach:",[1018,1458,1459,1469],{},[1021,1460,1461],{},[1024,1462,1463,1466],{},[1027,1464,1465],{},"Eintrag",[1027,1467,1468],{},"Was er sagt",[1034,1470,1471,1481,1494,1507,1519,1537],{},[1024,1472,1473,1478],{},[1039,1474,1475],{},[481,1476,1477],{},"drag start",[1039,1479,1480],{},"Die IDs, der Sensor und ob per Touch, die Liste, aus der er kommt.",[1024,1482,1483,1491],{},[1039,1484,1485,780,1488],{},[481,1486,1487],{},"over",[481,1489,1490],{},"left",[1039,1492,1493],{},"Jedes Ziel, das betreten und verlassen wurde, und ob es annimmt.",[1024,1495,1496,1501],{},[1039,1497,1498],{},[481,1499,1500],{},"release",[1039,1502,1503,1504,1506],{},"Das Ziel, über dem losgelassen wurde, während ",[481,1505,1164],{}," entscheidet.",[1024,1508,1509,1513],{},[1039,1510,1511],{},[481,1512,1164],{},[1039,1514,1515,1516,1518],{},"Das Urteil: angenommen, teilweise angenommen, von einem Hook abgelehnt, vom ",[481,1517,1395],{}," des Ziels abgelehnt, und wie lange die Hooks gebraucht haben.",[1024,1520,1521,1526],{},[1039,1522,1523],{},[481,1524,1525],{},"drop",[1039,1527,1528,1529,1532,1533,1536],{},"Das Ziel; bei sortierbaren Listen die Bewegung, ",[481,1530,1531],{},"e.result"," und ob ",[481,1534,1535],{},"preventDefault()"," aufgerufen wurde.",[1024,1538,1539,1544],{},[1039,1540,1541],{},[481,1542,1543],{},"cancel",[1039,1545,1546,1547,1550,1551,1553],{},"Warum: abgebrochen (Escape, ",[481,1548,1549],{},"cancel()","), von einem Hook abgelehnt oder vom ",[481,1552,1395],{}," des Ziels abgelehnt.",[478,1555,1556,1557,1073,1560,1563,1564,1567,1568,1571],{},"Außerdem ",[481,1558,1559],{},"auto-scroll on",[481,1561,1562],{},"off",", die ",[481,1565,1566],{},"announcement","-Texte (standardmäßig ausgeblendet) und,\naußerhalb von Drags, ",[481,1569,1570],{},"animate"," (Änderungen an den Elementen einer Liste, die kein Drag gemacht\nhat). Klick auf einen Eintrag, um seine Daten zu sehen. Ein Tab, der später geöffnet wird, bekommt\ndie bisherigen Drags.",[498,1573,1575],{"id":1574},"debug-a-drop-step-by-step","Einen Drop Schritt für Schritt debuggen",[478,1577,1578],{},"Eine Karte will nicht in eine Spalte. Mit offenem Tab:",[1580,1581,1582,1591,1608,1629],"ol",{},[962,1583,1584,1587,1588,1590],{},[490,1585,1586],{},"Reproduziere es"," von Hand oder mit ",[490,1589,1087],{},", damit deine Hände für den Tab frei bleiben.",[962,1592,1593,1596,1597,1600,1601,1604,1605,1607],{},[490,1594,1595],{},"Beobachte die Karte",", während die Karte über der Spalte ist. Rot heißt, die Liste lehnt die\nKarte ab: Sieh dir ihre ",[481,1598,1599],{},"group"," (",[481,1602,1603],{},"put",") oder das ",[481,1606,1395],{}," des Ziels an. Blau heißt, sie nimmt\nan, und das Problem kommt später.",[962,1609,1610,1613,1614,1616,1617,1619,1620,1622,1623,1625,1626,1628],{},[490,1611,1612],{},"Lies das Log"," dieses Drags. ",[481,1615,1164],{}," sagt, wer Nein gesagt hat – ein Hook oder das\n",[481,1618,1395],{}," des Ziels. Ging der Drop durch, aber deine Daten haben sich nicht geändert, sagt der\nEintrag ",[481,1621,1525],{},", ob ",[481,1624,1535],{}," aufgerufen wurde und was in ",[481,1627,1531],{}," stand: Eine\nkontrollierte Liste muss es selbst anwenden.",[962,1630,1631,1634,1635,1637,1638,1640,1641,780,1643,1645],{},[490,1632,1633],{},"Probier einen Fix live"," in ",[490,1636,1090],{}," aus – ein lockereres ",[481,1639,1354],{},", eine andere\n",[481,1642,1297],{},[481,1644,1128],{}," – und schreib dann den, der funktioniert, in deinen\nCode.",[498,1647,1649],{"id":1648},"how-it-works","Wie es funktioniert",[478,1651,1652,1653,1656],{},"Provider berichten an einen Hook, den der Teil auf der Seite installiert. Bis ein Tab die Seite\nbeobachtet, werden sie nur erfasst; dann hört die Seite zu wie jeder Monitor und schickt dem Tab,\nwas er zeigt – alle 40 ms während eines Drags, sonst zweimal pro Sekunde – und hört auf, sobald\neinige Sekunden lang kein Tab mehr zugesehen hat. Der Tab spricht mit der Seite über einen\n",[481,1654,1655],{},"BroadcastChannel"," des Origins der Seite. Er ändert nichts außer dem, worum du bittest: die Drags,\ndie Auswahl und die überschriebenen Optionen.",[1658,1659,1660],"style",{},"html pre.shiki code .sbwC8, html code.shiki .sbwC8{--shiki-light:#0969DA;--shiki-default:#0969DA;--shiki-dark:#7CC4FF}html pre.shiki code .sN8r7, html code.shiki .sN8r7{--shiki-light:#9A6700;--shiki-default:#9A6700;--shiki-dark:#E9C46A}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s78Kj, html code.shiki .s78Kj{--shiki-light:#1F8A5B;--shiki-default:#1F8A5B;--shiki-dark:#42B883}html pre.shiki code .s6cML, html code.shiki .s6cML{--shiki-light:#5B5B63;--shiki-default:#5B5B63;--shiki-dark:#9F9FA9}html pre.shiki code .snmWg, html code.shiki .snmWg{--shiki-light:#27272A;--shiki-default:#27272A;--shiki-dark:#E4E4E7}html pre.shiki code .sytrG, html code.shiki .sytrG{--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-default:#85858D;--shiki-default-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic}html pre.shiki code .sVvmN, html code.shiki .sVvmN{--shiki-light:#7C4DCC;--shiki-default:#7C4DCC;--shiki-dark:#C3A6FF}",{"title":512,"searchDepth":602,"depth":602,"links":1662},[1663,1669,1670,1671,1672,1673,1674,1675,1676,1677],{"id":500,"depth":586,"text":21,"children":1664},[1665,1666,1667,1668],{"id":504,"depth":602,"text":505},{"id":545,"depth":602,"text":546},{"id":772,"depth":602,"text":773},{"id":787,"depth":602,"text":788},{"id":956,"depth":586,"text":957},{"id":1015,"depth":586,"text":1016},{"id":1102,"depth":586,"text":1103},{"id":1134,"depth":586,"text":1135},{"id":1262,"depth":586,"text":1090},{"id":1417,"depth":586,"text":1093},{"id":1453,"depth":586,"text":1076},{"id":1574,"depth":586,"text":1575},{"id":1648,"depth":586,"text":1649},"Ein Vue-DnD-Kit-Tab in den Vue DevTools und den Nuxt DevTools – eine Live-Minikarte, ein Joystick, der wirklich zieht, Optionen live bearbeiten und ein Log jedes Drags.","md",null,{"source":1682},"6f7e373d0b",{"icon":116},{"title":113,"description":1678},"867hBbhDzh-yTveIAXuBzNAtf74mYmctqnfdDI1PcIs",[1687,1689],{"title":362,"path":363,"stem":364,"description":1688,"icon":111},"Wie aus Eingaben ein Drag wird – die Sensoren für Zeiger und Tastatur, Aktivierungsbedingungen, canDrag, eigene Sensoren und Drags, die du mit @vue-dnd-kit\u002Factions per Skript steuerst.",{"title":369,"path":370,"stem":371,"description":1690,"icon":121},"Das eigene Drag and Drop des Browsers als Drags der Bibliothek – Dateien, Links und Text aus anderen Apps in Drop-Ziele und Listen, die ihnen Platz machen, Elemente, die aus der Seite gezogen werden, und zwischen Fenstern deiner App.",1793707594366]