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