[{"data":1,"prerenderedAt":1690},["ShallowReactive",2],{"navigation-source":3,"navigation-ko":271,"docs-\u002Fko\u002Fdocs\u002Fguides\u002Fdevtools":474,"docs-surround-\u002Fko\u002Fdocs\u002Fguides\u002Fdevtools":1685},[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},"Ko","\u002Fko","ko",[277],{"title":278,"source":279,"path":280,"stem":281,"children":282,"page":35},"문서","6556add362","\u002Fko\u002Fdocs","ko\u002Fdocs",[283,305,374,430],{"title":284,"source":285,"icon":11,"path":286,"stem":287,"children":288,"page":35},"시작하기","e345edbff3","\u002Fko\u002Fdocs\u002Fgetting-started","ko\u002Fdocs\u002F1.getting-started",[289,293,297,301],{"title":290,"path":291,"stem":292,"icon":19},"소개","\u002Fko\u002Fdocs\u002Fgetting-started\u002Fintroduction","ko\u002Fdocs\u002F1.getting-started\u002F1.introduction",{"title":294,"path":295,"stem":296,"icon":24},"설치","\u002Fko\u002Fdocs\u002Fgetting-started\u002Finstallation","ko\u002Fdocs\u002F1.getting-started\u002F2.installation",{"title":298,"path":299,"stem":300,"icon":29},"빠른 시작","\u002Fko\u002Fdocs\u002Fgetting-started\u002Fquick-start","ko\u002Fdocs\u002F1.getting-started\u002F3.quick-start",{"title":302,"path":303,"stem":304,"icon":34},"v2에서 마이그레이션","\u002Fko\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2","ko\u002Fdocs\u002F1.getting-started\u002F4.migrating-from-v2",{"title":306,"source":307,"icon":38,"path":308,"stem":309,"children":310,"page":35},"가이드","0338bbaa33","\u002Fko\u002Fdocs\u002Fguides","ko\u002Fdocs\u002F2.guides",[311,315,319,323,327,331,335,339,343,347,351,355,359,363,367,370],{"title":312,"path":313,"stem":314,"icon":46},"프로바이더","\u002Fko\u002Fdocs\u002Fguides\u002Fprovider","ko\u002Fdocs\u002F2.guides\u002F01.provider",{"title":316,"path":317,"stem":318,"icon":51},"드래그 앤 드롭","\u002Fko\u002Fdocs\u002Fguides\u002Fdrag-and-drop","ko\u002Fdocs\u002F2.guides\u002F02.drag-and-drop",{"title":320,"path":321,"stem":322,"icon":56},"정렬 가능한 리스트","\u002Fko\u002Fdocs\u002Fguides\u002Fsortable-lists","ko\u002Fdocs\u002F2.guides\u002F03.sortable-lists",{"title":324,"path":325,"stem":326,"icon":61},"항목을 공유하는 리스트","\u002Fko\u002Fdocs\u002Fguides\u002Fshared-lists","ko\u002Fdocs\u002F2.guides\u002F04.shared-lists",{"title":328,"path":329,"stem":330,"icon":66},"트리","\u002Fko\u002Fdocs\u002Fguides\u002Ftrees","ko\u002Fdocs\u002F2.guides\u002F05.trees",{"title":332,"path":333,"stem":334,"icon":71},"멀티 드래그와 선택","\u002Fko\u002Fdocs\u002Fguides\u002Fmulti-drag","ko\u002Fdocs\u002F2.guides\u002F06.multi-drag",{"title":336,"path":337,"stem":338,"icon":76},"오버레이","\u002Fko\u002Fdocs\u002Fguides\u002Foverlay","ko\u002Fdocs\u002F2.guides\u002F07.overlay",{"title":340,"path":341,"stem":342,"icon":81},"축, 경계, 그리드","\u002Fko\u002Fdocs\u002Fguides\u002Fconstraints","ko\u002Fdocs\u002F2.guides\u002F08.constraints",{"title":344,"path":345,"stem":346,"icon":86},"드롭 결정하기","\u002Fko\u002Fdocs\u002Fguides\u002Fdrop-decisions","ko\u002Fdocs\u002F2.guides\u002F09.drop-decisions",{"title":348,"path":349,"stem":350,"icon":91},"애니메이션","\u002Fko\u002Fdocs\u002Fguides\u002Fanimations","ko\u002Fdocs\u002F2.guides\u002F10.animations",{"title":352,"path":353,"stem":354,"icon":96},"접근성","\u002Fko\u002Fdocs\u002Fguides\u002Faccessibility","ko\u002Fdocs\u002F2.guides\u002F11.accessibility",{"title":356,"path":357,"stem":358,"icon":101},"가상 리스트","\u002Fko\u002Fdocs\u002Fguides\u002Fvirtual-lists","ko\u002Fdocs\u002F2.guides\u002F12.virtual-lists",{"title":360,"path":361,"stem":362,"icon":106},"스타일링","\u002Fko\u002Fdocs\u002Fguides\u002Fstyling","ko\u002Fdocs\u002F2.guides\u002F13.styling",{"title":364,"path":365,"stem":366,"icon":111},"센서와 프로그래밍 방식 드래그","\u002Fko\u002Fdocs\u002Fguides\u002Fsensors","ko\u002Fdocs\u002F2.guides\u002F14.sensors",{"title":113,"path":368,"stem":369,"icon":116},"\u002Fko\u002Fdocs\u002Fguides\u002Fdevtools","ko\u002Fdocs\u002F2.guides\u002F15.devtools",{"title":371,"path":372,"stem":373,"icon":121},"파일과 다른 앱","\u002Fko\u002Fdocs\u002Fguides\u002Fnative","ko\u002Fdocs\u002F2.guides\u002F16.native",{"title":123,"source":375,"icon":124,"path":376,"stem":377,"children":378,"page":35},"5c96005c70","\u002Fko\u002Fdocs\u002Fapi","ko\u002Fdocs\u002F3.api",[379,382,385,388,391,394,397,400,403,407,411,415,419,422,426],{"title":129,"path":380,"stem":381,"icon":132},"\u002Fko\u002Fdocs\u002Fapi\u002Fdnd-provider","ko\u002Fdocs\u002F3.api\u002F01.dnd-provider",{"title":134,"path":383,"stem":384,"icon":51},"\u002Fko\u002Fdocs\u002Fapi\u002Fmake-draggable","ko\u002Fdocs\u002F3.api\u002F02.make-draggable",{"title":138,"path":386,"stem":387,"icon":141},"\u002Fko\u002Fdocs\u002Fapi\u002Fmake-droppable","ko\u002Fdocs\u002F3.api\u002F03.make-droppable",{"title":143,"path":389,"stem":390,"icon":56},"\u002Fko\u002Fdocs\u002Fapi\u002Fmake-sortable-list","ko\u002Fdocs\u002F3.api\u002F04.make-sortable-list",{"title":147,"path":392,"stem":393,"icon":150},"\u002Fko\u002Fdocs\u002Fapi\u002Fmake-sortable-item","ko\u002Fdocs\u002F3.api\u002F05.make-sortable-item",{"title":152,"path":395,"stem":396,"icon":155},"\u002Fko\u002Fdocs\u002Fapi\u002Fmake-sortable-tree","ko\u002Fdocs\u002F3.api\u002F06.make-sortable-tree",{"title":157,"path":398,"stem":399,"icon":160},"\u002Fko\u002Fdocs\u002Fapi\u002Fmake-selection-area","ko\u002Fdocs\u002F3.api\u002F07.make-selection-area",{"title":162,"path":401,"stem":402,"icon":165},"\u002Fko\u002Fdocs\u002Fapi\u002Fmake-drag-area","ko\u002Fdocs\u002F3.api\u002F08.make-drag-area",{"title":404,"path":405,"stem":406,"icon":170},"useDnD와 모니터","\u002Fko\u002Fdocs\u002Fapi\u002Fuse-dnd","ko\u002Fdocs\u002F3.api\u002F09.use-dnd",{"title":408,"path":409,"stem":410,"icon":29},"이벤트","\u002Fko\u002Fdocs\u002Fapi\u002Fevents","ko\u002Fdocs\u002F3.api\u002F10.events",{"title":412,"path":413,"stem":414,"icon":179},"모디파이어와 충돌 감지","\u002Fko\u002Fdocs\u002Fapi\u002Fmodifiers","ko\u002Fdocs\u002F3.api\u002F11.modifiers",{"title":416,"path":417,"stem":418,"icon":71},"DragPreview와 오버레이 props","\u002Fko\u002Fdocs\u002Fapi\u002Fdrag-preview","ko\u002Fdocs\u002F3.api\u002F12.drag-preview",{"title":348,"path":420,"stem":421,"icon":187},"\u002Fko\u002Fdocs\u002Fapi\u002Fanimations","ko\u002Fdocs\u002F3.api\u002F13.animations",{"title":423,"path":424,"stem":425,"icon":192},"센서","\u002Fko\u002Fdocs\u002Fapi\u002Fsensors","ko\u002Fdocs\u002F3.api\u002F14.sensors",{"title":427,"path":428,"stem":429,"icon":197},"공통 타입","\u002Fko\u002Fdocs\u002Fapi\u002Ftypes","ko\u002Fdocs\u002F3.api\u002F15.types",{"title":431,"path":432,"stem":433,"children":434,"icon":205,"source":473},"예제","\u002Fko\u002Fdocs\u002Fexamples","ko\u002Fdocs\u002F4.examples\u002F00.index",[435,437,441,445,449,453,457,461,465,469],{"title":436,"path":432,"stem":433,"icon":205},"개요",{"title":438,"path":439,"stem":440,"icon":210},"프로젝트 보드","\u002Fko\u002Fdocs\u002Fexamples\u002Fboard","ko\u002Fdocs\u002F4.examples\u002F01.board",{"title":442,"path":443,"stem":444,"icon":215},"주간 캘린더","\u002Fko\u002Fdocs\u002Fexamples\u002Fcalendar","ko\u002Fdocs\u002F4.examples\u002F02.calendar",{"title":446,"path":447,"stem":448,"icon":220},"파일 관리자","\u002Fko\u002Fdocs\u002Fexamples\u002Ffile-manager","ko\u002Fdocs\u002F4.examples\u002F03.file-manager",{"title":450,"path":451,"stem":452,"icon":225},"블록 에디터","\u002Fko\u002Fdocs\u002Fexamples\u002Fblock-editor","ko\u002Fdocs\u002F4.examples\u002F04.block-editor",{"title":454,"path":455,"stem":456,"icon":230},"체스","\u002Fko\u002Fdocs\u002Fexamples\u002Fchess","ko\u002Fdocs\u002F4.examples\u002F05.chess",{"title":458,"path":459,"stem":460,"icon":235},"폼 빌더","\u002Fko\u002Fdocs\u002Fexamples\u002Fform-builder","ko\u002Fdocs\u002F4.examples\u002F06.form-builder",{"title":462,"path":463,"stem":464,"icon":240},"디자인 캔버스","\u002Fko\u002Fdocs\u002Fexamples\u002Fdesign-canvas","ko\u002Fdocs\u002F4.examples\u002F07.design-canvas",{"title":466,"path":467,"stem":468,"icon":245},"페이지 빌더","\u002Fko\u002Fdocs\u002Fexamples\u002Fpage-builder","ko\u002Fdocs\u002F4.examples\u002F08.page-builder",{"title":470,"path":471,"stem":472,"icon":250},"데이터 테이블","\u002Fko\u002Fdocs\u002Fexamples\u002Fdata-table","ko\u002Fdocs\u002F4.examples\u002F09.data-table","bd60379aec",{"page":475,"fallback":35},{"id":476,"title":113,"body":477,"category":306,"description":1677,"extension":1678,"links":1679,"meta":1680,"navigation":1682,"path":368,"seo":1683,"stem":369,"__hash__":1684},"docs_ko\u002Fko\u002Fdocs\u002F2.guides\u002F15.devtools.md",{"type":478,"value":479,"toc":1660},"minimark",[480,497,500,504,509,540,546,550,743,762,773,777,788,792,799,919,938,956,960,1010,1016,1020,1096,1099,1103,1106,1129,1132,1136,1153,1172,1182,1263,1267,1273,1414,1417,1421,1424,1448,1451,1455,1458,1552,1569,1573,1576,1645,1649,1656],[481,482,483,487,488,491,492,496],"p",{},[484,485,486],"code",{},"@vue-dnd-kit\u002Fdevtools","는 Vue DevTools(",[484,489,490],{},"vite-plugin-vue-devtools",")와 Nuxt DevTools에 ",[493,494,495],"strong",{},"Vue DnD Kit","\n탭을 추가합니다. 이 탭은 페이지의 모든 리스트, 트리, 드롭 대상을 실시간 미니맵으로 보여 주고, 조이스틱으로\n어떤 항목이든 드래그하고, 앱이 실행되는 동안 옵션을 편집하고, 각 드래그가 한 일을 기록합니다. 개발\n중에만 동작하며, 프로덕션 빌드에는 아무것도 포함되지 않습니다.",[481,498,499],{},"탭은 개발 서버가 앱 옆에서 제공하는 별도의 페이지이므로, 이 문서 안에서는 실행할 수 없습니다. 세\n단계로 설정합니다.",[501,502,294],"h2",{"id":503},"install",[505,506,508],"h3",{"id":507},"_1-add-the-packages","1. 패키지 추가",[510,511,516],"pre",{"className":512,"code":513,"language":514,"meta":515,"style":515},"language-bash shiki shiki-themes dnd-light dnd-light dnd-dark","npm i -D @vue-dnd-kit\u002Fdevtools @vue-dnd-kit\u002Factions\n","bash","",[484,517,518],{"__ignoreMap":515},[519,520,523,527,531,534,537],"span",{"class":521,"line":522},"line",1,[519,524,526],{"class":525},"sbwC8","npm",[519,528,530],{"class":529},"sN8r7"," i",[519,532,533],{"class":529}," -D",[519,535,536],{"class":529}," @vue-dnd-kit\u002Fdevtools",[519,538,539],{"class":529}," @vue-dnd-kit\u002Factions\n",[481,541,542,545],{},[484,543,544],{},"@vue-dnd-kit\u002Factions","는 peer dependency입니다. 탭의 이동이 이 패키지를 거칩니다. npm 7+와 pnpm은\n알아서 설치하고, Yarn 1에서는 직접 추가하세요.",[505,547,549],{"id":548},"_2-add-the-plugin","2. 플러그인 추가",[551,552,553,702],"code-group",{},[510,554,559],{"className":555,"code":556,"filename":557,"language":558,"meta":515,"style":515},"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",[484,560,561,587,603,618,637,644,659,666,696],{"__ignoreMap":515},[519,562,563,567,571,575,578,581,584],{"class":521,"line":522},[519,564,566],{"class":565},"s78Kj","import",[519,568,570],{"class":569},"s6cML"," {",[519,572,574],{"class":573},"snmWg"," defineConfig ",[519,576,577],{"class":569},"}",[519,579,580],{"class":565}," from",[519,582,583],{"class":529}," 'vite'",[519,585,586],{"class":569},";\n",[519,588,590,592,595,598,601],{"class":521,"line":589},2,[519,591,566],{"class":565},[519,593,594],{"class":573}," vue ",[519,596,597],{"class":565},"from",[519,599,600],{"class":529}," '@vitejs\u002Fplugin-vue'",[519,602,586],{"class":569},[519,604,606,608,611,613,616],{"class":521,"line":605},3,[519,607,566],{"class":565},[519,609,610],{"class":573}," vueDevTools ",[519,612,597],{"class":565},[519,614,615],{"class":529}," 'vite-plugin-vue-devtools'",[519,617,586],{"class":569},[519,619,621,623,625,628,630,632,635],{"class":521,"line":620},4,[519,622,566],{"class":565},[519,624,570],{"class":569},[519,626,627],{"class":573}," vueDnDKitDevtools ",[519,629,577],{"class":569},[519,631,580],{"class":565},[519,633,634],{"class":529}," '@vue-dnd-kit\u002Fdevtools\u002Fvite'",[519,636,586],{"class":569},[519,638,640],{"class":521,"line":639},5,[519,641,643],{"emptyLinePlaceholder":642},true,"\n",[519,645,647,650,653,656],{"class":521,"line":646},6,[519,648,649],{"class":565},"export",[519,651,652],{"class":565}," default",[519,654,655],{"class":525}," defineConfig",[519,657,658],{"class":569},"({\n",[519,660,662],{"class":521,"line":661},7,[519,663,665],{"class":664},"sytrG","  \u002F\u002F Next to the Vue DevTools plugin: the tab joins its sidebar.\n",[519,667,669,673,676,679,682,685,688,690,693],{"class":521,"line":668},8,[519,670,672],{"class":671},"sVvmN","  plugins",[519,674,675],{"class":569},":",[519,677,678],{"class":569}," [",[519,680,681],{"class":525},"vueDevTools",[519,683,684],{"class":569},"(),",[519,686,687],{"class":525}," vueDnDKitDevtools",[519,689,684],{"class":569},[519,691,692],{"class":525}," vue",[519,694,695],{"class":569},"()],\n",[519,697,699],{"class":521,"line":698},9,[519,700,701],{"class":569},"});\n",[510,703,706],{"className":555,"code":704,"filename":705,"language":558,"meta":515,"style":515},"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",[484,707,708,719,724,739],{"__ignoreMap":515},[519,709,710,712,714,717],{"class":521,"line":522},[519,711,649],{"class":565},[519,713,652],{"class":565},[519,715,716],{"class":525}," defineNuxtConfig",[519,718,658],{"class":569},[519,720,721],{"class":521,"line":589},[519,722,723],{"class":664},"  \u002F\u002F With @vue-dnd-kit\u002Fdevtools installed, the tab appears in development.\n",[519,725,726,729,731,733,736],{"class":521,"line":605},[519,727,728],{"class":671},"  modules",[519,730,675],{"class":569},[519,732,678],{"class":569},[519,734,735],{"class":529},"'@vue-dnd-kit\u002Fnuxt'",[519,737,738],{"class":569},"],\n",[519,740,741],{"class":521,"line":620},[519,742,701],{"class":569},[481,744,745,746,749,750,753,754,757,758,761],{},"Vite에서 플러그인은 개발 서버(",[484,747,748],{},"vite serve",")에서 세 가지 일을 합니다. 탭을\n",[484,751,752],{},"\u002F__vue-dnd-kit-devtools\u002F","(",[484,755,756],{},"base"," 아래)에서 제공하고, Vue DevTools에 추가하며, 앱이 시작되기 전에\n페이지가 탭에 보고하도록 합니다. ",[484,759,760],{},"app.use()","는 필요 없고, 빌드에는 영향이 없습니다.",[481,763,764,765,768,769,772],{},"Nuxt에서는 ",[484,766,767],{},"@vue-dnd-kit\u002Fnuxt"," 모듈이 패키지를 찾아 탭을 제공하고, Nuxt DevTools에 추가하며, 클라이언트\n플러그인으로 페이지 쪽을 설치합니다. ",[484,770,771],{},"vueDndKit: { devtools: false }","로 끕니다.",[505,774,776],{"id":775},"_3-run-the-app-in-development","3. 개발 모드로 앱 실행",[481,778,779,780,783,784,787],{},"평소처럼 개발 서버를 시작하고(",[484,781,782],{},"vite",", ",[484,785,786],{},"nuxt dev",") 앱을 여세요. 탭이 준비됩니다. 페이지의 모든\n프로바이더가 어느 앱에서 렌더링되든 탭에 나타납니다.",[505,789,791],{"id":790},"without-the-plugins","플러그인 없이",[481,793,794,795,798],{},"직접 만든 개발 서버나, Vite가 ",[484,796,797],{},"index.html","로 제공하지 않는 페이지(SSR 구성)에서는 페이지 쪽을 직접\n설치하세요.",[510,800,803],{"className":555,"code":801,"filename":802,"language":558,"meta":515,"style":515},"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",[484,804,805,823,841,855,859,881,903],{"__ignoreMap":515},[519,806,807,809,811,814,816,818,821],{"class":521,"line":522},[519,808,566],{"class":565},[519,810,570],{"class":569},[519,812,813],{"class":573}," createApp ",[519,815,577],{"class":569},[519,817,580],{"class":565},[519,819,820],{"class":529}," 'vue'",[519,822,586],{"class":569},[519,824,825,827,829,832,834,836,839],{"class":521,"line":589},[519,826,566],{"class":565},[519,828,570],{"class":569},[519,830,831],{"class":573}," DnDDevtools ",[519,833,577],{"class":569},[519,835,580],{"class":565},[519,837,838],{"class":529}," '@vue-dnd-kit\u002Fdevtools'",[519,840,586],{"class":569},[519,842,843,845,848,850,853],{"class":521,"line":605},[519,844,566],{"class":565},[519,846,847],{"class":573}," App ",[519,849,597],{"class":565},[519,851,852],{"class":529}," '.\u002FApp.vue'",[519,854,586],{"class":569},[519,856,857],{"class":521,"line":620},[519,858,643],{"emptyLinePlaceholder":642},[519,860,861,864,867,870,873,875,878],{"class":521,"line":639},[519,862,863],{"class":565},"const",[519,865,866],{"class":573}," app ",[519,868,869],{"class":569},"=",[519,871,872],{"class":525}," createApp",[519,874,753],{"class":569},[519,876,877],{"class":573},"App",[519,879,880],{"class":569},");\n",[519,882,883,886,889,892,894,897,900],{"class":521,"line":646},[519,884,885],{"class":525},"app",[519,887,888],{"class":569},".",[519,890,891],{"class":525},"use",[519,893,753],{"class":569},[519,895,896],{"class":573},"DnDDevtools",[519,898,899],{"class":569},");",[519,901,902],{"class":664}," \u002F\u002F before mount: providers set up earlier aren't seen\n",[519,904,905,907,909,912,914,917],{"class":521,"line":661},[519,906,885],{"class":525},[519,908,888],{"class":569},[519,910,911],{"class":525},"mount",[519,913,753],{"class":569},[519,915,916],{"class":529},"'#app'",[519,918,880],{"class":569},[481,920,921,922,925,926,929,930,933,934,937],{},"또는 진입 파일에서 ",[484,923,924],{},"@vue-dnd-kit\u002Fdevtools\u002Fauto","를 가장 먼저 import하세요. 플러그인이 탭만 제공하고\n페이지 쪽은 직접 설치할 때는 ",[484,927,928],{},"vueDnDKitDevtools({ inject: false })","를 쓰세요.\n",[484,931,932],{},"@vue-dnd-kit\u002Fdevtools\u002Fvite","의 ",[484,935,936],{},"serveTab()","이 탭을 제공하는 미들웨어입니다.",[939,940,941],"note",{},[481,942,943,944,947,948,951,952,955],{},"프로덕션 빌드에서 ",[484,945,946],{},"app.use(DnDDevtools)","와 ",[484,949,950],{},"auto"," import는 거의 아무것도 남지 않습니다. 모든 진입점이\n먼저 ",[484,953,954],{},"process.env.NODE_ENV","를 확인하고, 번들러가 나머지를 제거합니다. 서버에서는 아무것도 하지\n않습니다.",[501,957,959],{"id":958},"open-it","탭 열기",[961,962,963,985,1000],"ul",{},[964,965,966,969,970,974,975,974,978,981,982,984],"li",{},[493,967,968],{},"Vue DevTools",": ",[971,972],"kbd",{"value":973},"Alt"," + ",[971,976],{"value":977},"Shift",[971,979],{"value":980},"D"," 또는 페이지 아래쪽의 Vue\n버튼, 그다음 ",[493,983,495],{}," 탭.",[964,986,987,969,990,974,992,974,994,996,997,999],{},[493,988,989],{},"Nuxt DevTools",[971,991],{"value":973},[971,993],{"value":977},[971,995],{"value":980}," 또는 Nuxt 버튼, 그다음\n",[493,998,495],{},"(사이드바나 그 더보기 메뉴에 있습니다).",[964,1001,1002,1005,1006,1009],{},[493,1003,1004],{},"별도 창",": 개발 서버의 ",[484,1007,1008],{},"http:\u002F\u002Flocalhost:5173\u002F__vue-dnd-kit-devtools\u002F","를 열거나 탭의 ⧉ 버튼을\n누르세요. 보조 모니터에서 편리합니다. 여러 페이지가 열려 있으면 위쪽의 선택 상자에서 지켜볼\n페이지를 고릅니다.",[1011,1012,1013],"warning",{},[481,1014,1015],{},"탭은 같은 창의 백그라운드 브라우저 탭이 아니라 별도 창에 두세요. 페이지가 계속 보여야 하며, 숨겨진\n페이지는 드래그를 취소합니다.",[501,1017,1019],{"id":1018},"the-tab-at-a-glance","탭 한눈에 보기",[1021,1022,1023,1036],"table",{},[1024,1025,1026],"thead",{},[1027,1028,1029,1033],"tr",{},[1030,1031,1032],"th",{},"부분",[1030,1034,1035],{},"담고 있는 것",[1037,1038,1039,1056,1064,1079],"tbody",{},[1027,1040,1041,1045],{},[1042,1043,1044],"td",{},"상단 바",[1042,1046,1047,1048,1051,1052,1055],{},"지금 드래그가 하는 일(",[484,1049,1050],{},"dragging card-3 → done (accepts)","), 지켜보는 페이지, ",[493,1053,1054],{},"⌖ Pick",", 편집한 옵션 수와 초기화, ⧉(별도 창), 테마.",[1027,1057,1058,1061],{},[1042,1059,1060],{},"왼쪽: 레지스트리",[1042,1062,1063],{},"모든 프로바이더를 트리로: 그 리스트, 트리, 드롭 대상, draggable. **☰**로 보이거나 숨깁니다.",[1027,1065,1066,1076],{},[1042,1067,1068,1069,1072,1073],{},"가운데: ",[493,1070,1071],{},"Map","과 ",[493,1074,1075],{},"Log",[1042,1077,1078],{},"페이지의 실시간 미니맵 또는 드래그 로그.",[1027,1080,1081,1093],{},[1042,1082,1083,1084,783,1087,783,1090],{},"오른쪽: ",[493,1085,1086],{},"Drive",[493,1088,1089],{},"Options",[493,1091,1092],{},"State",[1042,1094,1095],{},"조이스틱과 이동 버튼, 선택한 노드의 옵션, 그리고 프로바이더가 그 노드에 대해 아는 것.",[481,1097,1098],{},"레지스트리에서 노드를 고르거나 맵에서 항목을 고르면, 오른쪽이 그것을 따라갑니다.",[501,1100,1102],{"id":1101},"the-mini-map","미니맵",[481,1104,1105],{},"리스트, 트리, 드롭 대상마다 실시간 카드가 있고, 항목의 복사본이 실제 위치에 놓입니다. 페이지의 CSS가\n적용된, 오버레이가 보여 줄 것과 같은 클론입니다. 드래그 중에는 다음을 표시합니다.",[961,1107,1108,1119,1122],{},[964,1109,1110,1111,1114,1115,1118],{},"드래그를 ",[493,1112,1113],{},"받는","(파란색) 또는 ",[493,1116,1117],{},"거부하는","(빨간색) 리스트와 대상",[964,1120,1121],{},"플레이스홀더, 그리고 포인터 아래의 대상",[964,1123,1124,1125,1128],{},"포인터, 오버레이의 박스, ",[484,1126,1127],{},"placeholder: 'indicator'"," 리스트의 삽입선",[481,1130,1131],{},"클릭하면 항목을 고르고 페이지에서 강조하며, 더블 클릭하면 페이지가 그 항목으로 스크롤됩니다. 드롭이\n예상한 곳으로 가지 않을 때 맵을 쓰세요. 어느 리스트가 드래그를 받는지 한눈에 보여 줍니다.",[501,1133,1135],{"id":1134},"drive-the-joystick","Drive: 조이스틱",[481,1137,1138,1139,1141,1142,1144,1145,1148,1149,1152],{},"항목을 고르세요. 맵이나 레지스트리에서, 또는 ",[493,1140,1054],{},"으로 고를 수 있습니다. ",[493,1143,1054],{},"은 페이지의\ndraggable에 대한 다음 누르기를 동작시키지 않고 가로챕니다. 그다음 조이스틱의 손잡이를 미세요. 항목이\n집혀 그 방향으로 움직이며, 손잡이가 중심에서 멀수록 빨라집니다. 놓으면 멈추고, ",[493,1146,1147],{},"Drop","과\n",[493,1150,1151],{},"Cancel","로 드래그를 끝냅니다.",[481,1154,1155,1160,1161,1164,1165,1148,1168,1171],{},[1156,1157,1159],"a",{"href":1158},"\u002Fdocs\u002Fguides\u002Fsensors#a-sensor-of-your-own","센서 API","로 만든 ",[484,1162,1163],{},"devtools","라는 센서의 실제 포인터\n드래그입니다. 리스트는 그 아래에서 정렬되고, 컨테이너는 가장자리에서 자동 스크롤되며, ",[484,1166,1167],{},"onBeforeDrop",[484,1169,1170],{},"onDrop","은 다른 드래그처럼 실행됩니다. 비활성화된 항목은 집히지 않습니다. 페이지에서 시작한 키보드\n드래그도 조종할 수 있습니다.",[481,1173,1174,1175,1181],{},"정렬 가능한 리스트의 항목에는 버튼도 있습니다. 위로, 아래로, 처음으로, 끝으로, 그룹의 다른 리스트로.\n각각 ",[1156,1176,1178],{"href":1177},"\u002Fdocs\u002Fguides\u002Fsensors#programmatic-drags",[484,1179,1180],{},"moveItem","의 키보드 드래그 한 번입니다. 조이스틱\n아래에는 오버레이가 보여 주는 것의 큰 복사본이 있습니다.",[1021,1183,1184,1194],{},[1024,1185,1186],{},[1027,1187,1188,1191],{},[1030,1189,1190],{},"탭 안에서의 키",[1030,1192,1193],{},"동작",[1037,1195,1196,1219,1229,1243,1253],{},[1027,1197,1198,1213],{},[1042,1199,1200,1201,1204,1205,1204,1208,1204,1211],{},"화살표 키 또는 ",[971,1202],{"value":1203},"W"," ",[971,1206],{"value":1207},"A",[971,1209],{"value":1210},"S",[971,1212],{"value":980},[1042,1214,1215,1216,1218],{},"손잡이를 그 방향으로 절반만큼 밉니다. ",[971,1217],{"value":977},"를 누르면 끝까지",[1027,1220,1221,1226],{},[1042,1222,1223],{},[971,1224],{"value":1225},"G",[1042,1227,1228],{},"고른 항목을 집습니다",[1027,1230,1231,1240],{},[1042,1232,1233,1236,1237],{},[971,1234],{"value":1235},"Space"," \u002F ",[971,1238],{"value":1239},"Enter",[1042,1241,1242],{},"드롭",[1027,1244,1245,1250],{},[1042,1246,1247],{},[971,1248],{"value":1249},"Escape",[1042,1251,1252],{},"취소",[1027,1254,1255,1260],{},[1042,1256,1257],{},[971,1258],{"value":1259},"P",[1042,1261,1262],{},"페이지에서 고르기",[501,1264,1266],{"id":1265},"options","옵션",[481,1268,1269,1270,1272],{},"콜백이 아닌 모든 옵션은 앱이 실행되는 동안 편집할 수 있습니다. 노드를 고르고 ",[493,1271,1089],{},"를 여세요.",[1021,1274,1275,1284],{},[1024,1276,1277],{},[1027,1278,1279,1282],{},[1030,1280,1281],{},"노드",[1030,1283,1266],{},[1037,1285,1286,1327,1366,1383,1400],{},[1027,1287,1288,1290],{},[1042,1289,312],{},[1042,1291,1292,783,1295,783,1298,783,1301,1304,1305,783,1308,783,1311,783,1314,783,1317,783,1320,783,1323,1326],{},[484,1293,1294],{},"overlayFit",[484,1296,1297],{},"autoScroll",[484,1299,1300],{},"collision",[484,1302,1303],{},"modifiers","(라이브러리의 것, 이름으로), ",[484,1306,1307],{},"animation",[484,1309,1310],{},"dropAnimation",[484,1312,1313],{},"animateChanges",[484,1315,1316],{},"activation",[484,1318,1319],{},"keyboard",[484,1321,1322],{},"haptics",[484,1324,1325],{},"copyModifier","…",[1027,1328,1329,1332],{},[1042,1330,1331],{},"리스트",[1042,1333,1334,783,1337,783,1340,783,1343,783,1346,783,1349,783,1352,783,1355,783,1358,783,1360,783,1362,783,1364],{},[484,1335,1336],{},"disabled",[484,1338,1339],{},"strategy",[484,1341,1342],{},"placeholder",[484,1344,1345],{},"behavior",[484,1347,1348],{},"multiple",[484,1350,1351],{},"sort",[484,1353,1354],{},"dropOutside",[484,1356,1357],{},"acceptMode",[484,1359,1307],{},[484,1361,1313],{},[484,1363,1297],{},[484,1365,1303],{},[1027,1367,1368,1370],{},[1042,1369,328],{},[1042,1371,1372,783,1374,783,1377,783,1380,1326],{},[484,1373,1342],{},[484,1375,1376],{},"indentation",[484,1378,1379],{},"nesting",[484,1381,1382],{},"maxDepth",[1027,1384,1385,1388],{},[1042,1386,1387],{},"드롭 대상",[1042,1389,1390,783,1392,783,1395,783,1398],{},[484,1391,1336],{},[484,1393,1394],{},"priority",[484,1396,1397],{},"accept",[484,1399,1357],{},[1027,1401,1402,1405],{},[1042,1403,1404],{},"항목",[1042,1406,1407,783,1409,783,1412],{},[484,1408,1336],{},[484,1410,1411],{},"keyboardMode",[484,1413,1316],{},[481,1415,1416],{},"편집은 즉시, 이 페이지에만 적용되며 코드에는 절대 기록되지 않습니다. 라이브러리는 옵션을 읽는 곳에서\n새 값을 읽습니다. 편집은 초기화하거나(옵션별 ↺, 또는 상단 바의 초기화), 프로바이더가 언마운트되거나,\n페이지를 새로 고칠 때까지 유지됩니다. 편집한 옵션 옆에는 코드의 값이 표시됩니다. 편집이 적용된 동안\n마운트되는 항목(가상 리스트의 행)도 편집을 받습니다.",[501,1418,1420],{"id":1419},"state","상태",[481,1422,1423],{},"고른 노드에 대해 각 프로바이더가 아는 것:",[961,1425,1426,1432,1440],{},[964,1427,1428,1431],{},[493,1429,1430],{},"드래그 세션",": 상태, 활성 id, 항목, 센서, 대상과 그 수락 여부, 포인터, 오버레이, 정렬 그룹의\n세션과 삽입선",[964,1433,1434,1436,1437,1439],{},[493,1435,1331],{},": 순서와 초안. ",[493,1438,328],{},": 행",[964,1441,1442,1444,1445,1447],{},[493,1443,1404],{},": 타입, 데이터, 위치. ",[493,1446,1387],{},": 규칙",[481,1449,1450],{},"항목은 이벤트 없이 마운트되고 언마운트되므로, 레지스트리는 1초 안에 따라잡습니다.",[501,1452,1454],{"id":1453},"log","로그",[481,1456,1457],{},"드래그마다 띠 하나가 순서대로 표시됩니다.",[1021,1459,1460,1469],{},[1024,1461,1462],{},[1027,1463,1464,1466],{},[1030,1465,1404],{},[1030,1467,1468],{},"알려 주는 것",[1037,1470,1471,1481,1494,1506,1518,1535],{},[1027,1472,1473,1478],{},[1042,1474,1475],{},[484,1476,1477],{},"drag start",[1042,1479,1480],{},"id, 센서와 터치 여부, 출발한 리스트.",[1027,1482,1483,1491],{},[1042,1484,1485,783,1488],{},[484,1486,1487],{},"over",[484,1489,1490],{},"left",[1042,1492,1493],{},"들어가고 나온 각 대상과 그 수락 여부.",[1027,1495,1496,1501],{},[1042,1497,1498],{},[484,1499,1500],{},"release",[1042,1502,1503,1505],{},[484,1504,1167],{},"이 결정하는 동안, 놓은 위치의 대상.",[1027,1507,1508,1512],{},[1042,1509,1510],{},[484,1511,1167],{},[1042,1513,1514,1515,1517],{},"판정: 수락, 일부 수락, 훅에 의한 거부, 대상의 ",[484,1516,1397],{},"에 의한 거부, 그리고 훅에 걸린 시간.",[1027,1519,1520,1525],{},[1042,1521,1522],{},[484,1523,1524],{},"drop",[1042,1526,1527,1528,783,1531,1534],{},"대상. 정렬 가능한 리스트라면 이동, ",[484,1529,1530],{},"e.result",[484,1532,1533],{},"preventDefault()"," 호출 여부.",[1027,1536,1537,1542],{},[1042,1538,1539],{},[484,1540,1541],{},"cancel",[1042,1543,1544,1545,1548,1549,1551],{},"이유: 취소(Escape, ",[484,1546,1547],{},"cancel()","), 훅에 의한 거부, 대상의 ",[484,1550,1397],{},"에 의한 거부.",[481,1553,1554,1555,1072,1558,783,1561,1564,1565,1568],{},"그 밖에 ",[484,1556,1557],{},"auto-scroll on",[484,1559,1560],{},"off",[484,1562,1563],{},"announcement"," 문구(기본으로 숨김), 그리고 드래그 밖의\n",[484,1566,1567],{},"animate","(드래그가 아닌 리스트 항목 변경)도 있습니다. 항목을 클릭하면 데이터를 볼 수 있습니다. 나중에\n연 탭도 그때까지의 드래그를 받습니다.",[501,1570,1572],{"id":1571},"debug-a-drop-step-by-step","드롭 디버깅, 단계별로",[481,1574,1575],{},"카드가 컬럼에 들어가지 않습니다. 탭을 연 채로:",[1577,1578,1579,1588,1605,1627],"ol",{},[964,1580,1581,1582,1584,1585,888],{},"직접, 또는 손이 탭을 다룰 수 있도록 ",[493,1583,1086],{},"로 ",[493,1586,1587],{},"재현하세요",[964,1589,1590,1591,1594,1595,753,1598,1601,1602,1604],{},"카드가 컬럼 위에 있는 동안 ",[493,1592,1593],{},"맵을 보세요",". 빨간색이면 리스트가 카드를 거부하는 것이니 그\n리스트의 ",[484,1596,1597],{},"group",[484,1599,1600],{},"put",")이나 대상의 ",[484,1603,1397],{},"를 확인하세요. 파란색이면 받는 것이고, 문제는 그\n뒤에 있습니다.",[964,1606,1607,1608,1611,1612,1614,1615,1617,1618,1620,1621,1623,1624,1626],{},"그 드래그의 ",[493,1609,1610],{},"로그를 읽으세요",". ",[484,1613,1167],{},"이 누가 거부했는지 알려 줍니다. 훅인지, 대상의\n",[484,1616,1397],{},"인지. 드롭은 완료됐는데 데이터가 바뀌지 않았다면, ",[484,1619,1524],{}," 항목이 ",[484,1622,1533],{},"가\n호출되었는지와 ",[484,1625,1530],{},"에 무엇이 있었는지 알려 줍니다. 제어 리스트는 이를 직접 적용해야 합니다.",[964,1628,1629,1631,1632,1635,1636,1638,1639,1641,1642,1644],{},[493,1630,1089],{},"에서 ",[493,1633,1634],{},"수정을 실시간으로 시험하세요",". 더 느슨한 ",[484,1637,1357],{},", 다른 ",[484,1640,1300],{},",\n",[484,1643,1127],{}," 같은 것입니다. 그다음 효과가 있는 것을 코드에 반영하세요.",[501,1646,1648],{"id":1647},"how-it-works","동작 방식",[481,1650,1651,1652,1655],{},"프로바이더는 페이지 쪽이 설치한 훅에 보고합니다. 탭이 페이지를 지켜보기 전까지는 기록만 됩니다.\n그다음 페이지는 모니터처럼 듣고, 탭이 보여 주는 것을 보냅니다. 드래그 중에는 40 ms마다, 그 밖에는\n1초에 두 번 보내며, 몇 초 동안 지켜보는 탭이 없으면 멈춥니다. 탭은 페이지 출처의 ",[484,1653,1654],{},"BroadcastChannel","로\n페이지와 통신합니다. 요청한 것(드래그, 선택, 옵션 재정의) 말고는 아무것도 바꾸지 않습니다.",[1657,1658,1659],"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":515,"searchDepth":605,"depth":605,"links":1661},[1662,1668,1669,1670,1671,1672,1673,1674,1675,1676],{"id":503,"depth":589,"text":294,"children":1663},[1664,1665,1666,1667],{"id":507,"depth":605,"text":508},{"id":548,"depth":605,"text":549},{"id":775,"depth":605,"text":776},{"id":790,"depth":605,"text":791},{"id":958,"depth":589,"text":959},{"id":1018,"depth":589,"text":1019},{"id":1101,"depth":589,"text":1102},{"id":1134,"depth":589,"text":1135},{"id":1265,"depth":589,"text":1266},{"id":1419,"depth":589,"text":1420},{"id":1453,"depth":589,"text":1454},{"id":1571,"depth":589,"text":1572},{"id":1647,"depth":589,"text":1648},"Vue DevTools와 Nuxt DevTools의 Vue DnD Kit 탭. 실시간 미니맵, 실제로 드래그하는 조이스틱, 실시간 옵션 편집, 모든 드래그의 로그.","md",null,{"source":1681},"6f7e373d0b",{"icon":116},{"title":113,"description":1677},"fdmrbtFroA1g68CI5U1fFm6mv_RD5OpJYmnbmCQAU3s",[1686,1688],{"title":364,"path":365,"stem":366,"description":1687,"icon":111},"입력이 드래그가 되는 방식. 포인터 센서와 키보드 센서, 활성화 조건, canDrag, 직접 만든 센서, 그리고 @vue-dnd-kit\u002Factions로 작성하는 드래그.",{"title":371,"path":372,"stem":373,"description":1689,"icon":121},"브라우저 자체의 드래그 앤 드롭을 라이브러리의 드래그로. 다른 앱의 파일, 링크, 텍스트를 드롭 대상과 자리를 만들어 주는 리스트로, 페이지 밖으로 드래그하는 항목, 그리고 앱의 창 사이에서.",1793707562699]