[{"data":1,"prerenderedAt":1694},["ShallowReactive",2],{"navigation-source":3,"navigation-fr":271,"docs-\u002Ffr\u002Fdocs\u002Fguides\u002Fdevtools":470,"docs-surround-\u002Ffr\u002Fdocs\u002Fguides\u002Fdevtools":1689},[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},"Fr","\u002Ffr","fr",[277],{"title":278,"source":279,"path":280,"stem":281,"children":282,"page":35},"Documentation","6556add362","\u002Ffr\u002Fdocs","fr\u002Fdocs",[283,303,370,426],{"title":284,"source":285,"icon":11,"path":286,"stem":287,"children":288,"page":35},"Prise en main","e345edbff3","\u002Ffr\u002Fdocs\u002Fgetting-started","fr\u002Fdocs\u002F1.getting-started",[289,292,295,299],{"title":16,"path":290,"stem":291,"icon":19},"\u002Ffr\u002Fdocs\u002Fgetting-started\u002Fintroduction","fr\u002Fdocs\u002F1.getting-started\u002F1.introduction",{"title":21,"path":293,"stem":294,"icon":24},"\u002Ffr\u002Fdocs\u002Fgetting-started\u002Finstallation","fr\u002Fdocs\u002F1.getting-started\u002F2.installation",{"title":296,"path":297,"stem":298,"icon":29},"Démarrage rapide","\u002Ffr\u002Fdocs\u002Fgetting-started\u002Fquick-start","fr\u002Fdocs\u002F1.getting-started\u002F3.quick-start",{"title":300,"path":301,"stem":302,"icon":34},"Migrer depuis la v2","\u002Ffr\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2","fr\u002Fdocs\u002F1.getting-started\u002F4.migrating-from-v2",{"title":37,"source":304,"icon":38,"path":305,"stem":306,"children":307,"page":35},"0338bbaa33","\u002Ffr\u002Fdocs\u002Fguides","fr\u002Fdocs\u002F2.guides",[308,312,316,320,324,328,332,336,340,344,347,351,355,359,363,366],{"title":309,"path":310,"stem":311,"icon":46},"Le provider","\u002Ffr\u002Fdocs\u002Fguides\u002Fprovider","fr\u002Fdocs\u002F2.guides\u002F01.provider",{"title":313,"path":314,"stem":315,"icon":51},"Glisser-déposer","\u002Ffr\u002Fdocs\u002Fguides\u002Fdrag-and-drop","fr\u002Fdocs\u002F2.guides\u002F02.drag-and-drop",{"title":317,"path":318,"stem":319,"icon":56},"Listes triables","\u002Ffr\u002Fdocs\u002Fguides\u002Fsortable-lists","fr\u002Fdocs\u002F2.guides\u002F03.sortable-lists",{"title":321,"path":322,"stem":323,"icon":61},"Listes qui partagent des items","\u002Ffr\u002Fdocs\u002Fguides\u002Fshared-lists","fr\u002Fdocs\u002F2.guides\u002F04.shared-lists",{"title":325,"path":326,"stem":327,"icon":66},"Arbres","\u002Ffr\u002Fdocs\u002Fguides\u002Ftrees","fr\u002Fdocs\u002F2.guides\u002F05.trees",{"title":329,"path":330,"stem":331,"icon":71},"Multi-drag et sélection","\u002Ffr\u002Fdocs\u002Fguides\u002Fmulti-drag","fr\u002Fdocs\u002F2.guides\u002F06.multi-drag",{"title":333,"path":334,"stem":335,"icon":76},"L'overlay","\u002Ffr\u002Fdocs\u002Fguides\u002Foverlay","fr\u002Fdocs\u002F2.guides\u002F07.overlay",{"title":337,"path":338,"stem":339,"icon":81},"Axes, limites et grilles","\u002Ffr\u002Fdocs\u002Fguides\u002Fconstraints","fr\u002Fdocs\u002F2.guides\u002F08.constraints",{"title":341,"path":342,"stem":343,"icon":86},"Décider d'un dépôt","\u002Ffr\u002Fdocs\u002Fguides\u002Fdrop-decisions","fr\u002Fdocs\u002F2.guides\u002F09.drop-decisions",{"title":88,"path":345,"stem":346,"icon":91},"\u002Ffr\u002Fdocs\u002Fguides\u002Fanimations","fr\u002Fdocs\u002F2.guides\u002F10.animations",{"title":348,"path":349,"stem":350,"icon":96},"Accessibilité","\u002Ffr\u002Fdocs\u002Fguides\u002Faccessibility","fr\u002Fdocs\u002F2.guides\u002F11.accessibility",{"title":352,"path":353,"stem":354,"icon":101},"Listes virtuelles","\u002Ffr\u002Fdocs\u002Fguides\u002Fvirtual-lists","fr\u002Fdocs\u002F2.guides\u002F12.virtual-lists",{"title":356,"path":357,"stem":358,"icon":106},"Style","\u002Ffr\u002Fdocs\u002Fguides\u002Fstyling","fr\u002Fdocs\u002F2.guides\u002F13.styling",{"title":360,"path":361,"stem":362,"icon":111},"Capteurs et glissements programmatiques","\u002Ffr\u002Fdocs\u002Fguides\u002Fsensors","fr\u002Fdocs\u002F2.guides\u002F14.sensors",{"title":113,"path":364,"stem":365,"icon":116},"\u002Ffr\u002Fdocs\u002Fguides\u002Fdevtools","fr\u002Fdocs\u002F2.guides\u002F15.devtools",{"title":367,"path":368,"stem":369,"icon":121},"Fichiers et autres applications","\u002Ffr\u002Fdocs\u002Fguides\u002Fnative","fr\u002Fdocs\u002F2.guides\u002F16.native",{"title":123,"source":371,"icon":124,"path":372,"stem":373,"children":374,"page":35},"5c96005c70","\u002Ffr\u002Fdocs\u002Fapi","fr\u002Fdocs\u002F3.api",[375,378,381,384,387,390,393,396,399,403,407,411,415,418,422],{"title":129,"path":376,"stem":377,"icon":132},"\u002Ffr\u002Fdocs\u002Fapi\u002Fdnd-provider","fr\u002Fdocs\u002F3.api\u002F01.dnd-provider",{"title":134,"path":379,"stem":380,"icon":51},"\u002Ffr\u002Fdocs\u002Fapi\u002Fmake-draggable","fr\u002Fdocs\u002F3.api\u002F02.make-draggable",{"title":138,"path":382,"stem":383,"icon":141},"\u002Ffr\u002Fdocs\u002Fapi\u002Fmake-droppable","fr\u002Fdocs\u002F3.api\u002F03.make-droppable",{"title":143,"path":385,"stem":386,"icon":56},"\u002Ffr\u002Fdocs\u002Fapi\u002Fmake-sortable-list","fr\u002Fdocs\u002F3.api\u002F04.make-sortable-list",{"title":147,"path":388,"stem":389,"icon":150},"\u002Ffr\u002Fdocs\u002Fapi\u002Fmake-sortable-item","fr\u002Fdocs\u002F3.api\u002F05.make-sortable-item",{"title":152,"path":391,"stem":392,"icon":155},"\u002Ffr\u002Fdocs\u002Fapi\u002Fmake-sortable-tree","fr\u002Fdocs\u002F3.api\u002F06.make-sortable-tree",{"title":157,"path":394,"stem":395,"icon":160},"\u002Ffr\u002Fdocs\u002Fapi\u002Fmake-selection-area","fr\u002Fdocs\u002F3.api\u002F07.make-selection-area",{"title":162,"path":397,"stem":398,"icon":165},"\u002Ffr\u002Fdocs\u002Fapi\u002Fmake-drag-area","fr\u002Fdocs\u002F3.api\u002F08.make-drag-area",{"title":400,"path":401,"stem":402,"icon":170},"useDnD et moniteurs","\u002Ffr\u002Fdocs\u002Fapi\u002Fuse-dnd","fr\u002Fdocs\u002F3.api\u002F09.use-dnd",{"title":404,"path":405,"stem":406,"icon":29},"Événements","\u002Ffr\u002Fdocs\u002Fapi\u002Fevents","fr\u002Fdocs\u002F3.api\u002F10.events",{"title":408,"path":409,"stem":410,"icon":179},"Modificateurs et collision","\u002Ffr\u002Fdocs\u002Fapi\u002Fmodifiers","fr\u002Fdocs\u002F3.api\u002F11.modifiers",{"title":412,"path":413,"stem":414,"icon":71},"DragPreview et props de l'overlay","\u002Ffr\u002Fdocs\u002Fapi\u002Fdrag-preview","fr\u002Fdocs\u002F3.api\u002F12.drag-preview",{"title":88,"path":416,"stem":417,"icon":187},"\u002Ffr\u002Fdocs\u002Fapi\u002Fanimations","fr\u002Fdocs\u002F3.api\u002F13.animations",{"title":419,"path":420,"stem":421,"icon":192},"Capteurs","\u002Ffr\u002Fdocs\u002Fapi\u002Fsensors","fr\u002Fdocs\u002F3.api\u002F14.sensors",{"title":423,"path":424,"stem":425,"icon":197},"Types communs","\u002Ffr\u002Fdocs\u002Fapi\u002Ftypes","fr\u002Fdocs\u002F3.api\u002F15.types",{"title":427,"path":428,"stem":429,"children":430,"icon":205,"source":469},"Exemples","\u002Ffr\u002Fdocs\u002Fexamples","fr\u002Fdocs\u002F4.examples\u002F00.index",[431,433,437,441,445,449,453,457,461,465],{"title":432,"path":428,"stem":429,"icon":205},"Vue d'ensemble",{"title":434,"path":435,"stem":436,"icon":210},"Tableau de projet","\u002Ffr\u002Fdocs\u002Fexamples\u002Fboard","fr\u002Fdocs\u002F4.examples\u002F01.board",{"title":438,"path":439,"stem":440,"icon":215},"Calendrier de la semaine","\u002Ffr\u002Fdocs\u002Fexamples\u002Fcalendar","fr\u002Fdocs\u002F4.examples\u002F02.calendar",{"title":442,"path":443,"stem":444,"icon":220},"Gestionnaire de fichiers","\u002Ffr\u002Fdocs\u002Fexamples\u002Ffile-manager","fr\u002Fdocs\u002F4.examples\u002F03.file-manager",{"title":446,"path":447,"stem":448,"icon":225},"Éditeur de blocs","\u002Ffr\u002Fdocs\u002Fexamples\u002Fblock-editor","fr\u002Fdocs\u002F4.examples\u002F04.block-editor",{"title":450,"path":451,"stem":452,"icon":230},"Échecs","\u002Ffr\u002Fdocs\u002Fexamples\u002Fchess","fr\u002Fdocs\u002F4.examples\u002F05.chess",{"title":454,"path":455,"stem":456,"icon":235},"Constructeur de formulaires","\u002Ffr\u002Fdocs\u002Fexamples\u002Fform-builder","fr\u002Fdocs\u002F4.examples\u002F06.form-builder",{"title":458,"path":459,"stem":460,"icon":240},"Canevas de design","\u002Ffr\u002Fdocs\u002Fexamples\u002Fdesign-canvas","fr\u002Fdocs\u002F4.examples\u002F07.design-canvas",{"title":462,"path":463,"stem":464,"icon":245},"Constructeur de pages","\u002Ffr\u002Fdocs\u002Fexamples\u002Fpage-builder","fr\u002Fdocs\u002F4.examples\u002F08.page-builder",{"title":466,"path":467,"stem":468,"icon":250},"Tableau de données","\u002Ffr\u002Fdocs\u002Fexamples\u002Fdata-table","fr\u002Fdocs\u002F4.examples\u002F09.data-table","bd60379aec",{"page":471,"fallback":35},{"id":472,"title":113,"body":473,"category":37,"description":1681,"extension":1682,"links":1683,"meta":1684,"navigation":1686,"path":364,"seo":1687,"stem":365,"__hash__":1688},"docs_fr\u002Ffr\u002Fdocs\u002F2.guides\u002F15.devtools.md",{"type":474,"value":475,"toc":1664},"minimark",[476,493,496,500,505,536,542,546,739,758,769,773,784,788,795,916,935,953,957,1006,1012,1016,1096,1099,1103,1106,1128,1131,1135,1148,1168,1178,1259,1262,1268,1411,1414,1417,1420,1451,1454,1457,1460,1557,1575,1579,1582,1649,1653,1660],[477,478,479,483,484,488,489,492],"p",{},[480,481,482],"code",{},"@vue-dnd-kit\u002Fdevtools"," ajoute un onglet ",[485,486,487],"strong",{},"Vue DnD Kit"," aux Vue DevTools\n(",[480,490,491],{},"vite-plugin-vue-devtools",") et aux Nuxt DevTools. Il montre chaque liste, arbre et cible de\ndépôt de la page dans une mini-carte en direct, fait glisser n'importe quel item avec un\njoystick, modifie les options pendant que l'application tourne, et journalise ce que chaque\nglissement a fait. Il ne fonctionne qu'en développement : rien n'en arrive dans un build de\nproduction.",[477,494,495],{},"L'onglet est une page à part entière, servie par votre serveur de développement à côté de votre\napplication : il ne peut donc pas tourner dans cette documentation. Trois étapes suffisent à le\nmettre en place.",[497,498,21],"h2",{"id":499},"install",[501,502,504],"h3",{"id":503},"_1-add-the-packages","1. Ajouter les paquets",[506,507,512],"pre",{"className":508,"code":509,"language":510,"meta":511,"style":511},"language-bash shiki shiki-themes dnd-light dnd-light dnd-dark","npm i -D @vue-dnd-kit\u002Fdevtools @vue-dnd-kit\u002Factions\n","bash","",[480,513,514],{"__ignoreMap":511},[515,516,519,523,527,530,533],"span",{"class":517,"line":518},"line",1,[515,520,522],{"class":521},"sbwC8","npm",[515,524,526],{"class":525},"sN8r7"," i",[515,528,529],{"class":525}," -D",[515,531,532],{"class":525}," @vue-dnd-kit\u002Fdevtools",[515,534,535],{"class":525}," @vue-dnd-kit\u002Factions\n",[477,537,538,541],{},[480,539,540],{},"@vue-dnd-kit\u002Factions"," est une peer dependency : les déplacements de l'onglet passent par lui.\nnpm 7+ et pnpm l'installent d'eux-mêmes ; avec Yarn 1, ajoutez-le.",[501,543,545],{"id":544},"_2-add-the-plugin","2. Ajouter le plugin",[547,548,549,698],"code-group",{},[506,550,555],{"className":551,"code":552,"filename":553,"language":554,"meta":511,"style":511},"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",[480,556,557,583,599,614,633,640,655,662,692],{"__ignoreMap":511},[515,558,559,563,567,571,574,577,580],{"class":517,"line":518},[515,560,562],{"class":561},"s78Kj","import",[515,564,566],{"class":565},"s6cML"," {",[515,568,570],{"class":569},"snmWg"," defineConfig ",[515,572,573],{"class":565},"}",[515,575,576],{"class":561}," from",[515,578,579],{"class":525}," 'vite'",[515,581,582],{"class":565},";\n",[515,584,586,588,591,594,597],{"class":517,"line":585},2,[515,587,562],{"class":561},[515,589,590],{"class":569}," vue ",[515,592,593],{"class":561},"from",[515,595,596],{"class":525}," '@vitejs\u002Fplugin-vue'",[515,598,582],{"class":565},[515,600,602,604,607,609,612],{"class":517,"line":601},3,[515,603,562],{"class":561},[515,605,606],{"class":569}," vueDevTools ",[515,608,593],{"class":561},[515,610,611],{"class":525}," 'vite-plugin-vue-devtools'",[515,613,582],{"class":565},[515,615,617,619,621,624,626,628,631],{"class":517,"line":616},4,[515,618,562],{"class":561},[515,620,566],{"class":565},[515,622,623],{"class":569}," vueDnDKitDevtools ",[515,625,573],{"class":565},[515,627,576],{"class":561},[515,629,630],{"class":525}," '@vue-dnd-kit\u002Fdevtools\u002Fvite'",[515,632,582],{"class":565},[515,634,636],{"class":517,"line":635},5,[515,637,639],{"emptyLinePlaceholder":638},true,"\n",[515,641,643,646,649,652],{"class":517,"line":642},6,[515,644,645],{"class":561},"export",[515,647,648],{"class":561}," default",[515,650,651],{"class":521}," defineConfig",[515,653,654],{"class":565},"({\n",[515,656,658],{"class":517,"line":657},7,[515,659,661],{"class":660},"sytrG","  \u002F\u002F Next to the Vue DevTools plugin: the tab joins its sidebar.\n",[515,663,665,669,672,675,678,681,684,686,689],{"class":517,"line":664},8,[515,666,668],{"class":667},"sVvmN","  plugins",[515,670,671],{"class":565},":",[515,673,674],{"class":565}," [",[515,676,677],{"class":521},"vueDevTools",[515,679,680],{"class":565},"(),",[515,682,683],{"class":521}," vueDnDKitDevtools",[515,685,680],{"class":565},[515,687,688],{"class":521}," vue",[515,690,691],{"class":565},"()],\n",[515,693,695],{"class":517,"line":694},9,[515,696,697],{"class":565},"});\n",[506,699,702],{"className":551,"code":700,"filename":701,"language":554,"meta":511,"style":511},"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",[480,703,704,715,720,735],{"__ignoreMap":511},[515,705,706,708,710,713],{"class":517,"line":518},[515,707,645],{"class":561},[515,709,648],{"class":561},[515,711,712],{"class":521}," defineNuxtConfig",[515,714,654],{"class":565},[515,716,717],{"class":517,"line":585},[515,718,719],{"class":660},"  \u002F\u002F With @vue-dnd-kit\u002Fdevtools installed, the tab appears in development.\n",[515,721,722,725,727,729,732],{"class":517,"line":601},[515,723,724],{"class":667},"  modules",[515,726,671],{"class":565},[515,728,674],{"class":565},[515,730,731],{"class":525},"'@vue-dnd-kit\u002Fnuxt'",[515,733,734],{"class":565},"],\n",[515,736,737],{"class":517,"line":616},[515,738,697],{"class":565},[477,740,741,742,745,746,749,750,753,754,757],{},"Avec Vite, le plugin fait trois choses sur le serveur de développement (",[480,743,744],{},"vite serve",") : il sert\nl'onglet à ",[480,747,748],{},"\u002F__vue-dnd-kit-devtools\u002F"," (sous votre ",[480,751,752],{},"base","), l'ajoute aux Vue DevTools, et fait en\nsorte que la page lui rende compte avant le démarrage de votre application. Aucun ",[480,755,756],{},"app.use()","\nn'est nécessaire, et les builds ne sont pas touchés.",[477,759,760,761,764,765,768],{},"Avec Nuxt, le module ",[480,762,763],{},"@vue-dnd-kit\u002Fnuxt"," trouve le paquet, sert l'onglet, l'ajoute aux Nuxt\nDevTools et installe le côté page avec un plugin client. ",[480,766,767],{},"vueDndKit: { devtools: false }"," le\ndésactive.",[501,770,772],{"id":771},"_3-run-the-app-in-development","3. Lancer l'application en développement",[477,774,775,776,779,780,783],{},"Démarrez le serveur de développement comme d'habitude (",[480,777,778],{},"vite",", ",[480,781,782],{},"nuxt dev",") et ouvrez\nl'application : l'onglet est prêt. Chaque provider de la page s'y affiche, quelle que soit\nl'application dans laquelle il est rendu.",[501,785,787],{"id":786},"without-the-plugins","Sans les plugins",[477,789,790,791,794],{},"Pour votre propre serveur de développement, ou une page que Vite ne sert pas à partir d'un\n",[480,792,793],{},"index.html"," (configurations SSR), installez vous-même le côté page :",[506,796,799],{"className":551,"code":797,"filename":798,"language":554,"meta":511,"style":511},"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",[480,800,801,819,837,851,855,878,900],{"__ignoreMap":511},[515,802,803,805,807,810,812,814,817],{"class":517,"line":518},[515,804,562],{"class":561},[515,806,566],{"class":565},[515,808,809],{"class":569}," createApp ",[515,811,573],{"class":565},[515,813,576],{"class":561},[515,815,816],{"class":525}," 'vue'",[515,818,582],{"class":565},[515,820,821,823,825,828,830,832,835],{"class":517,"line":585},[515,822,562],{"class":561},[515,824,566],{"class":565},[515,826,827],{"class":569}," DnDDevtools ",[515,829,573],{"class":565},[515,831,576],{"class":561},[515,833,834],{"class":525}," '@vue-dnd-kit\u002Fdevtools'",[515,836,582],{"class":565},[515,838,839,841,844,846,849],{"class":517,"line":601},[515,840,562],{"class":561},[515,842,843],{"class":569}," App ",[515,845,593],{"class":561},[515,847,848],{"class":525}," '.\u002FApp.vue'",[515,850,582],{"class":565},[515,852,853],{"class":517,"line":616},[515,854,639],{"emptyLinePlaceholder":638},[515,856,857,860,863,866,869,872,875],{"class":517,"line":635},[515,858,859],{"class":561},"const",[515,861,862],{"class":569}," app ",[515,864,865],{"class":565},"=",[515,867,868],{"class":521}," createApp",[515,870,871],{"class":565},"(",[515,873,874],{"class":569},"App",[515,876,877],{"class":565},");\n",[515,879,880,883,886,889,891,894,897],{"class":517,"line":642},[515,881,882],{"class":521},"app",[515,884,885],{"class":565},".",[515,887,888],{"class":521},"use",[515,890,871],{"class":565},[515,892,893],{"class":569},"DnDDevtools",[515,895,896],{"class":565},");",[515,898,899],{"class":660}," \u002F\u002F before mount: providers set up earlier aren't seen\n",[515,901,902,904,906,909,911,914],{"class":517,"line":657},[515,903,882],{"class":521},[515,905,885],{"class":565},[515,907,908],{"class":521},"mount",[515,910,871],{"class":565},[515,912,913],{"class":525},"'#app'",[515,915,877],{"class":565},[477,917,918,919,922,923,926,927,930,931,934],{},"Ou importez ",[480,920,921],{},"@vue-dnd-kit\u002Fdevtools\u002Fauto"," en premier dans le fichier d'entrée. Utilisez\n",[480,924,925],{},"vueDnDKitDevtools({ inject: false })"," quand le plugin doit servir l'onglet mais que vous\ninstallez vous-même le côté page ; ",[480,928,929],{},"serveTab()"," de ",[480,932,933],{},"@vue-dnd-kit\u002Fdevtools\u002Fvite"," est le middleware\nqui sert l'onglet.",[936,937,938],"note",{},[477,939,940,941,944,945,948,949,952],{},"Dans un build de production, ",[480,942,943],{},"app.use(DnDDevtools)"," et l'import ",[480,946,947],{},"auto"," se réduisent à presque\nrien : chaque point d'entrée vérifie d'abord ",[480,950,951],{},"process.env.NODE_ENV",", et les bundlers éliminent le\nreste. Sur le serveur, ils ne font rien.",[497,954,956],{"id":955},"open-it","L'ouvrir",[958,959,960,981,996],"ul",{},[961,962,963,966,967,971,972,971,975,978,979,885],"li",{},[485,964,965],{},"Vue DevTools"," : ",[968,969],"kbd",{"value":970},"Alt"," + ",[968,973],{"value":974},"Shift",[968,976],{"value":977},"D",", ou le bouton Vue\nen bas de la page, puis l'onglet ",[485,980,487],{},[961,982,983,966,986,971,988,971,990,992,993,995],{},[485,984,985],{},"Nuxt DevTools",[968,987],{"value":970},[968,989],{"value":974},[968,991],{"value":977},", ou le bouton\nNuxt, puis ",[485,994,487],{}," (dans la barre latérale ou son menu de débordement).",[961,997,998,1001,1002,1005],{},[485,999,1000],{},"Une fenêtre à part"," : ouvrez ",[480,1003,1004],{},"http:\u002F\u002Flocalhost:5173\u002F__vue-dnd-kit-devtools\u002F"," sur votre\nserveur de développement, ou le bouton ⧉ de l'onglet. Pratique sur un second écran. Avec\nplusieurs pages ouvertes, un sélecteur en haut choisit celle à observer.",[1007,1008,1009],"warning",{},[477,1010,1011],{},"Gardez l'onglet dans une fenêtre à part, pas dans un onglet de navigateur en arrière-plan de la\nmême fenêtre : la page doit rester visible, et une page masquée annule les glissements.",[497,1013,1015],{"id":1014},"the-tab-at-a-glance","L'onglet en un coup d'œil",[1017,1018,1019,1032],"table",{},[1020,1021,1022],"thead",{},[1023,1024,1025,1029],"tr",{},[1026,1027,1028],"th",{},"Partie",[1026,1030,1031],{},"Ce qu'elle contient",[1033,1034,1035,1052,1064,1079],"tbody",{},[1023,1036,1037,1041],{},[1038,1039,1040],"td",{},"Barre du haut",[1038,1042,1043,1044,1047,1048,1051],{},"Ce que fait le glissement en ce moment (",[480,1045,1046],{},"dragging card-3 → done (accepts)","), la page observée, ",[485,1049,1050],{},"⌖ Pick",", le nombre d'options modifiées avec une réinitialisation, ⧉ (une fenêtre à part) et le thème.",[1023,1053,1054,1057],{},[1038,1055,1056],{},"À gauche : le registre",[1038,1058,1059,1060,1063],{},"Chaque provider sous forme d'arbre : ses listes, arbres, cibles de dépôt et éléments déplaçables. ",[485,1061,1062],{},"☰"," l'affiche ou le masque.",[1023,1065,1066,1076],{},[1038,1067,1068,1069,1072,1073],{},"Au milieu : ",[485,1070,1071],{},"Map"," et ",[485,1074,1075],{},"Log",[1038,1077,1078],{},"La mini-carte en direct de la page, ou le journal des glissements.",[1023,1080,1081,1093],{},[1038,1082,1083,1084,779,1087,779,1090],{},"À droite : ",[485,1085,1086],{},"Drive",[485,1088,1089],{},"Options",[485,1091,1092],{},"State",[1038,1094,1095],{},"Le joystick et les boutons de déplacement, les options du nœud choisi, et ce que le provider en sait.",[477,1097,1098],{},"Choisissez un nœud dans le registre ou un item sur la carte, et la partie droite le suit.",[497,1100,1102],{"id":1101},"the-mini-map","La mini-carte",[477,1104,1105],{},"Une carte en direct par liste, arbre et cible de dépôt, avec des copies de leurs items là où ils\nsont — les mêmes clones que montrerait l'overlay, avec le CSS de la page. Pendant un glissement,\nelle marque :",[958,1107,1108,1119,1122],{},[961,1109,1110,1111,1114,1115,1118],{},"les listes et les cibles qui ",[485,1112,1113],{},"acceptent"," le glissement (en bleu) ou le ",[485,1116,1117],{},"refusent"," (en\nrouge) ;",[961,1120,1121],{},"le placeholder, et la cible sous le pointeur ;",[961,1123,1124,1125,885],{},"le pointeur, la boîte de l'overlay, et la ligne d'insertion des listes en\n",[480,1126,1127],{},"placeholder: 'indicator'",[477,1129,1130],{},"Un clic choisit un item et le met en évidence sur la page ; un double clic fait défiler la page\njusqu'à lui. Utilisez la carte quand un dépôt ne va pas là où vous l'attendez : elle montre d'un\ncoup d'œil quelles listes acceptent le glissement.",[497,1132,1134],{"id":1133},"drive-the-joystick","Drive : le joystick",[477,1136,1137,1138,1140,1141,1072,1144,1147],{},"Choisissez un item — sur la carte, dans le registre, ou avec ",[485,1139,1050],{},", qui prend l'appui\nsuivant sur un élément déplaçable de la page au lieu de le laisser agir — et poussez le bouton du\njoystick. L'item est saisi et se déplace dans ce sens, d'autant plus vite que le bouton est loin\ndu centre. Relâchez et il s'arrête ; ",[485,1142,1143],{},"Drop",[485,1145,1146],{},"Cancel"," terminent le glissement.",[477,1149,1150,1151,1154,1155,1160,1161,1072,1164,1167],{},"C'est un vrai glissement au pointeur d'un capteur nommé ",[480,1152,1153],{},"devtools",", fait avec\nl'",[1156,1157,1159],"a",{"href":1158},"\u002Fdocs\u002Fguides\u002Fsensors#a-sensor-of-your-own","API publique des capteurs"," : les listes se trient\nen dessous, les conteneurs défilent automatiquement à leurs bords, et ",[480,1162,1163],{},"onBeforeDrop",[480,1165,1166],{},"onDrop","\ns'exécutent comme pour n'importe quel glissement. Les items désactivés ne sont pas saisis. Un\nglissement au clavier démarré par la page peut aussi être dirigé.",[477,1169,1170,1171,1177],{},"Les items des listes triables ont aussi des boutons : vers le haut, vers le bas, au début, à la\nfin, vers une autre liste du groupe. Chacun est un glissement au clavier de\n",[1156,1172,1174],{"href":1173},"\u002Fdocs\u002Fguides\u002Fsensors#programmatic-drags",[480,1175,1176],{},"moveItem",". Sous le joystick, une grande copie de ce\nque montre l'overlay.",[1017,1179,1180,1190],{},[1020,1181,1182],{},[1023,1183,1184,1187],{},[1026,1185,1186],{},"Touche, dans l'onglet",[1026,1188,1189],{},"Effet",[1033,1191,1192,1215,1225,1239,1249],{},[1023,1193,1194,1209],{},[1038,1195,1196,1197,1200,1201,1200,1204,1200,1207],{},"Flèches ou ",[968,1198],{"value":1199},"W"," ",[968,1202],{"value":1203},"A",[968,1205],{"value":1206},"S",[968,1208],{"value":977},[1038,1210,1211,1212,1214],{},"Pousse le bouton dans ce sens, à mi-course ; avec ",[968,1213],{"value":974},", jusqu'au bout",[1023,1216,1217,1222],{},[1038,1218,1219],{},[968,1220],{"value":1221},"G",[1038,1223,1224],{},"Saisit l'item choisi",[1023,1226,1227,1236],{},[1038,1228,1229,1232,1233],{},[968,1230],{"value":1231},"Space"," \u002F ",[968,1234],{"value":1235},"Enter",[1038,1237,1238],{},"Dépose",[1023,1240,1241,1246],{},[1038,1242,1243],{},[968,1244],{"value":1245},"Escape",[1038,1247,1248],{},"Annule",[1023,1250,1251,1256],{},[1038,1252,1253],{},[968,1254],{"value":1255},"P",[1038,1257,1258],{},"Choisit sur la page",[497,1260,1089],{"id":1261},"options",[477,1263,1264,1265,1267],{},"Chaque option qui n'est pas un callback peut être modifiée pendant que l'application tourne.\nChoisissez le nœud et ouvrez ",[485,1266,1089],{}," :",[1017,1269,1270,1279],{},[1020,1271,1272],{},[1023,1273,1274,1277],{},[1026,1275,1276],{},"Nœud",[1026,1278,1089],{},[1033,1280,1281,1323,1362,1380,1397],{},[1023,1282,1283,1286],{},[1038,1284,1285],{},"Provider",[1038,1287,1288,779,1291,779,1294,779,1297,1300,1301,779,1304,779,1307,779,1310,779,1313,779,1316,779,1319,1322],{},[480,1289,1290],{},"overlayFit",[480,1292,1293],{},"autoScroll",[480,1295,1296],{},"collision",[480,1298,1299],{},"modifiers"," (ceux de la bibliothèque, par nom), ",[480,1302,1303],{},"animation",[480,1305,1306],{},"dropAnimation",[480,1308,1309],{},"animateChanges",[480,1311,1312],{},"activation",[480,1314,1315],{},"keyboard",[480,1317,1318],{},"haptics",[480,1320,1321],{},"copyModifier","…",[1023,1324,1325,1328],{},[1038,1326,1327],{},"Liste",[1038,1329,1330,779,1333,779,1336,779,1339,779,1342,779,1345,779,1348,779,1351,779,1354,779,1356,779,1358,779,1360],{},[480,1331,1332],{},"disabled",[480,1334,1335],{},"strategy",[480,1337,1338],{},"placeholder",[480,1340,1341],{},"behavior",[480,1343,1344],{},"multiple",[480,1346,1347],{},"sort",[480,1349,1350],{},"dropOutside",[480,1352,1353],{},"acceptMode",[480,1355,1303],{},[480,1357,1309],{},[480,1359,1293],{},[480,1361,1299],{},[1023,1363,1364,1367],{},[1038,1365,1366],{},"Arbre",[1038,1368,1369,779,1371,779,1374,779,1377,1322],{},[480,1370,1338],{},[480,1372,1373],{},"indentation",[480,1375,1376],{},"nesting",[480,1378,1379],{},"maxDepth",[1023,1381,1382,1385],{},[1038,1383,1384],{},"Cible de dépôt",[1038,1386,1387,779,1389,779,1392,779,1395],{},[480,1388,1332],{},[480,1390,1391],{},"priority",[480,1393,1394],{},"accept",[480,1396,1353],{},[1023,1398,1399,1402],{},[1038,1400,1401],{},"Item",[1038,1403,1404,779,1406,779,1409],{},[480,1405,1332],{},[480,1407,1408],{},"keyboardMode",[480,1410,1312],{},[477,1412,1413],{},"Une modification s'applique tout de suite, à cette page uniquement, et n'est jamais écrite dans\nvotre code : la bibliothèque lit la nouvelle valeur là où elle lit l'option. Elle dure jusqu'à ce\nque vous la réinitialisiez (↺ par option, ou la réinitialisation de la barre du haut), que le\nprovider soit démonté ou que la page soit rechargée. Une option modifiée affiche à côté d'elle la\nvaleur de votre code. Les items montés pendant qu'une modification est active — les lignes d'une\nliste virtuelle — la reçoivent aussi.",[497,1415,1092],{"id":1416},"state",[477,1418,1419],{},"Ce que sait chaque provider, pour le nœud que vous avez choisi :",[958,1421,1422,1429,1440],{},[961,1423,1424,1425,1428],{},"la ",[485,1426,1427],{},"session de glissement"," : le statut, les ids, items et capteur actifs, la cible et si elle\naccepte, le pointeur, l'overlay, la session du groupe triable et la ligne d'insertion ;",[961,1430,1431,1432,1435,1436,1439],{},"une ",[485,1433,1434],{},"liste"," : son ordre et son brouillon ; un ",[485,1437,1438],{},"arbre"," : ses lignes ;",[961,1441,1442,1443,1446,1447,1450],{},"un ",[485,1444,1445],{},"item"," : son type, ses données et sa position ; une ",[485,1448,1449],{},"cible de dépôt"," : ses règles.",[477,1452,1453],{},"Les items se montent et se démontent sans événements : le registre se met à jour en moins d'une\nseconde.",[497,1455,1075],{"id":1456},"log",[477,1458,1459],{},"Une bande par glissement, dans l'ordre :",[1017,1461,1462,1472],{},[1020,1463,1464],{},[1023,1465,1466,1469],{},[1026,1467,1468],{},"Entrée",[1026,1470,1471],{},"Ce qu'elle indique",[1033,1473,1474,1484,1497,1510,1522,1540],{},[1023,1475,1476,1481],{},[1038,1477,1478],{},[480,1479,1480],{},"drag start",[1038,1482,1483],{},"Les ids, le capteur et s'il s'agit du toucher, la liste d'origine.",[1023,1485,1486,1494],{},[1038,1487,1488,779,1491],{},[480,1489,1490],{},"over",[480,1492,1493],{},"left",[1038,1495,1496],{},"Chaque cible où il entre et d'où il sort, et si elle accepte.",[1023,1498,1499,1504],{},[1038,1500,1501],{},[480,1502,1503],{},"release",[1038,1505,1506,1507,1509],{},"La cible au-dessus de laquelle il a été relâché, pendant qu'",[480,1508,1163],{}," décide.",[1023,1511,1512,1516],{},[1038,1513,1514],{},[480,1515,1163],{},[1038,1517,1518,1519,1521],{},"Le verdict : accepté, partiellement accepté, refusé par un hook, refusé par l'",[480,1520,1394],{}," de la cible, et le temps qu'ont pris les hooks.",[1023,1523,1524,1529],{},[1038,1525,1526],{},[480,1527,1528],{},"drop",[1038,1530,1531,1532,1535,1536,1539],{},"La cible ; pour les listes triables, le déplacement, ",[480,1533,1534],{},"e.result",", et si ",[480,1537,1538],{},"preventDefault()"," a été appelé.",[1023,1541,1542,1547],{},[1038,1543,1544],{},[480,1545,1546],{},"cancel",[1038,1548,1549,1550,1553,1554,1556],{},"Pourquoi : annulé (Escape, ",[480,1551,1552],{},"cancel()","), refusé par un hook, ou refusé par l'",[480,1555,1394],{}," de la cible.",[477,1558,1559,1560,1072,1563,1566,1567,1570,1571,1574],{},"Aussi ",[480,1561,1562],{},"auto-scroll on",[480,1564,1565],{},"off",", les textes des ",[480,1568,1569],{},"announcement"," (masqués par défaut) et, en dehors\ndes glissements, ",[480,1572,1573],{},"animate"," (les changements des items d'une liste qui ne viennent pas d'un\nglissement). Cliquez sur une entrée pour voir ses données. Un onglet ouvert plus tard reçoit les\nglissements déjà faits.",[497,1576,1578],{"id":1577},"debug-a-drop-step-by-step","Déboguer un dépôt, pas à pas",[477,1580,1581],{},"Une carte refuse d'aller dans une colonne. Avec l'onglet ouvert :",[1583,1584,1585,1594,1611,1632],"ol",{},[961,1586,1587,1590,1591,1593],{},[485,1588,1589],{},"Reproduisez-le"," à la main, ou avec ",[485,1592,1086],{}," pour garder les mains libres pour l'onglet.",[961,1595,1596,1599,1600,1603,1604,1607,1608,1610],{},[485,1597,1598],{},"Observez la carte"," pendant que la carte est au-dessus de la colonne. Du rouge signifie que la\nliste refuse la carte : regardez son ",[480,1601,1602],{},"group"," (",[480,1605,1606],{},"put",") ou l'",[480,1609,1394],{}," de la cible. Du bleu\nsignifie qu'elle l'accepte, et que le problème vient plus tard.",[961,1612,1613,1616,1617,1619,1620,1622,1623,1625,1626,1628,1629,1631],{},[485,1614,1615],{},"Lisez le journal"," de ce glissement. ",[480,1618,1163],{}," dit qui a dit non — un hook, ou\nl'",[480,1621,1394],{}," de la cible. Si le dépôt a abouti mais que vos données n'ont pas changé, l'entrée\n",[480,1624,1528],{}," indique si ",[480,1627,1538],{}," a été appelé et ce que contenait ",[480,1630,1534],{}," : une liste\ncontrôlée doit l'appliquer elle-même.",[961,1633,1634,1637,1638,1640,1641,1643,1644,779,1646,1648],{},[485,1635,1636],{},"Essayez un correctif en direct"," dans ",[485,1639,1089],{}," — un ",[480,1642,1353],{}," plus souple, une autre\n",[480,1645,1296],{},[480,1647,1127],{}," — puis écrivez dans votre code celui qui fonctionne.",[497,1650,1652],{"id":1651},"how-it-works","Comment ça marche",[477,1654,1655,1656,1659],{},"Les providers rendent compte à un hook qu'installe le côté page. Tant qu'aucun onglet n'observe\nla page, ils sont seulement enregistrés ; ensuite, la page écoute comme n'importe quel moniteur et\nenvoie à l'onglet ce qu'il affiche — toutes les 40 ms pendant un glissement, deux fois par seconde\nsinon — et s'arrête quand aucun onglet ne l'a observée depuis quelques secondes. L'onglet parle à\nla page via un ",[480,1657,1658],{},"BroadcastChannel"," de l'origine de la page. Il ne change rien d'autre que ce que\nvous demandez : les glissements, la sélection et les options remplacées.",[1661,1662,1663],"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":511,"searchDepth":601,"depth":601,"links":1665},[1666,1672,1673,1674,1675,1676,1677,1678,1679,1680],{"id":499,"depth":585,"text":21,"children":1667},[1668,1669,1670,1671],{"id":503,"depth":601,"text":504},{"id":544,"depth":601,"text":545},{"id":771,"depth":601,"text":772},{"id":786,"depth":601,"text":787},{"id":955,"depth":585,"text":956},{"id":1014,"depth":585,"text":1015},{"id":1101,"depth":585,"text":1102},{"id":1133,"depth":585,"text":1134},{"id":1261,"depth":585,"text":1089},{"id":1416,"depth":585,"text":1092},{"id":1456,"depth":585,"text":1075},{"id":1577,"depth":585,"text":1578},{"id":1651,"depth":585,"text":1652},"Un onglet Vue DnD Kit dans les Vue DevTools et les Nuxt DevTools — une mini-carte en direct, un joystick qui fait vraiment glisser, l'édition des options en direct et un journal de chaque glissement.","md",null,{"source":1685},"6f7e373d0b",{"icon":116},{"title":113,"description":1681},"iWHNMVb88xDBx2fSl9m-yBd4wtk9Wual25j6vkIfzXU",[1690,1692],{"title":360,"path":361,"stem":362,"description":1691,"icon":111},"Comment une entrée devient un glissement — les capteurs pointeur et clavier, les contraintes d'activation, canDrag, vos propres capteurs, et les glissements que vous scriptez avec @vue-dnd-kit\u002Factions.",{"title":367,"path":368,"stem":369,"description":1693,"icon":121},"Le glisser-déposer propre au navigateur, sous forme de glissements de la bibliothèque — des fichiers, des liens et du texte venus d'autres applications dans des cibles de dépôt et des listes qui leur font de la place, des items glissés hors de la page, et entre les fenêtres de votre application.",1793707606736]