Drag & Drop
끌어서 놓기
끌어서 놓기를 사용하면 사용자가 항목을 직접 이동, 재정렬 또는 전송할 수 있습니다. 항목을 집어 들었을 때와 놓을 수 있는 위치를 반드시 보여야 합니다.
pointer events + keyboard alternative실제 예시
작업 카드는 집어 들면 미리보기를 보여줘. 놓을 수 있는 곳에 빈 공간이 생기고, 카드를 놓으면 새 순서가 확정돼.
주요 부분
- 01트리거
- 02Property change
- 03Timing model
- 04Reduced-motion result
사용할 때
항목을 공간에서 이동하는 것이 빠르고, 그 결과를 되돌릴 수 있을 때 사용하세요.
다음 경우에는 사용하지 마세요
끌어서 놓기만 유일한 방법으로 만들지 마세요. 키보드 지원과 명확한 이동 조작을 추가하세요.
코드에서 사용된 이름
pointer events + keyboard alternative 출시하기 전에
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome：Complete the task with 끌어서 놓기 (Drag & Drop)。 User context：작업 카드는 집어 들면 미리보기를 보여줘. 놓을 수 있는 곳에 빈 공간이 생기고, 카드를 놓으면 새 순서가 확정돼. Design concept to apply：끌어서 놓기 (Drag & Drop)。 Why it fits：항목을 공간에서 이동하는 것이 빠르고, 그 결과를 되돌릴 수 있을 때 사용하세요. Do not use it when：끌어서 놓기만 유일한 방법으로 만들지 마세요. 키보드 지원과 명확한 이동 조작을 추가하세요. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary)：이 표준은 나열된 범위만 적용합니다. 시각적 스타일, 제품 결정, 또는 Vibulary 예시는 선택하지 않습니다. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
이 요청을 확인하세요
Review how 끌어서 놓기 (Drag & Drop) is used now. Definition: 끌어서 놓기를 사용하면 사용자가 항목을 직접 이동, 재정렬 또는 전송할 수 있습니다. 항목을 집어 들었을 때와 놓을 수 있는 위치를 반드시 보여야 합니다. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.