드래그 및 드롭 위젯 및 사전 설정
1) 개념과 시나리오
드래그 및 드롭 위젯은 사용자가 그리드를 참조하여 캔버스에 자유롭게 배치하는 대화 형 블록 (그래프 카드, 테이블, 필터, 동작 버튼) 입니다. 사전 설정-신속하게 적용, 공유 및 버전화 할 수있는 레이아웃 및 스타일 (레이아웃 + 테마 + 매개 변수) 을 저장했습니다.
일반적인 시나리오:- 준비된 블록에서 대시 보드 조립 (KPI 카드, 그래프, 필터).
- 사전 설정 "Compact", "Analytics", "Presentation" 을 통한 레이아웃의 빠른 변경.
- 공동 편집: 제품은 위젯을 배치하고 분석가는 소스를 설정합니다.
- 이해 관계자를위한 읽기 전용 출판물.
2) 건축 원칙
1. 그리드 우선: 논리 열/행 (12/24), 픽셀-파생 상품에 위치.
2. 스냅 및 가이드: 마그네틱 가이드, 메쉬 및 이웃을 고수하고 정렬합니다.
3. 제약 인식: 크기/종횡비 제한 기, 최소/최대, 잠금 측면.
4. 기본값으로 안전: 연속 자원 조달, 거래 게시, 실행 취소/재실행.
5. A11y- 우선: 키보드에서 DnD 및 음성 변경.
6. 실시간 준비: 멀티 플레이어 세션을위한 CRDT/OT.
7. 논리적: 디자인 토큰, 테마 사전 설정, 밝은/어두운/대비 모드.
8. 휴대용: JSON/YAML 수출/가져 오기; 회로 버전.
3) 데이터 모델 (단순화)
json
{
"id": "layout_01",
"name": "Analytics - Compact,"
"version": "2. 1. 0",
"grid": { "cols": 12, "rowHeight": 8, "gutter": 8, "margin": 16 },
"theme": { "preset": "light-pro", "tokens": { "radius": 12, "elevation": "soft" } },
"widgets": [
{
"id": "w_kpi_1",
"type": "kpi",
"title": "GGR",
"pos": { "x": 0, "y": 0, "w": 3, "h": 4, "z": 1 },
"constraints": { "minW": 2, "minH": 3, "lockAspect": false },
"props": { "format": "currency", "source": "ggr_daily" }
},
{
"id": "w_chart_1",
"type": "lineChart",
"title": "Deposits Trend",
"pos": { "x": 3, "y": 0, "w": 6, "h": 8, "z": 1 },
"props": { "source": "deposits", "legend": true }
},
{
"id": "w_table_1",
"type": "table",
"title": "Top Segments",
"pos": { "x": 9, "y": 0, "w": 3, "h": 12, "z": 2 },
"props": { "source": "segments_top", "pageSize": 12 }
}
],
"meta": { "createdBy": "dima", "updatedAt": "2025-11-03T17:55:00Z" }
}4) 그리드, 스냅 및 가이드
그리드: 데스크톱 용 스피커 12 개, 태블릿 6 개, 전화 용 4 개; 'rowHeight' 는 안정적인 수직 피치에 대해 동일합니다.
스냅 핑: 가장자리/중앙으로 스냅; 4/8 px에서 "자석"; 이웃에게 다가 갈 때 현명한 가이드
자동 흐름: 충돌시 아래 자동 전송; "떨어지는 블록" 알고리즘.
응답: 중단 점 → 각 중단 점에 대한 대체 'pos'.
5) DnD 이벤트 및 상태
확인: 'dragStart', 'drag', 'drag Over', 'drop', 'resizeStart', 'crezeEnd', 'resizeEnd', 'selection', 'group', 'ungroup', 'reorder', 'undo', 'redo'.
상태:- 드래그하는 동안 유령/미리보기 -반투명 경로.
- 장소 보유자: 허용 구역 (녹색), 금지 (빨간색).
- 충돌 맵-점유 셀 (비트 세트/간격 트리) 의 빠른 계산.
6) 인상, 정렬, z- 인덱스
비율을 유지하기 위해 코너에서 그립을 유지하고 '시프트' 를 유지하십시오.
그룹의 정렬: "왼쪽/오른쪽", "중앙", "고르게 분배".
오버레이 레벨: 범위 제한이있는 'z', 앞/뒤 버튼.
7) 그룹, 컨테이너 및 중첩
그룹: 여러 선택, 결합 된 드래그 앤 드롭, 그룹 정렬.
위젯 컨테이너: 탭, 아코디언, 회전 목마-자식 위젯을 수락하는 방법을 알고 있습니다.
컨테이너 정류장: 외부 그리드 내부 (다른 열).
8) 사전 설정 (템플릿) 및 버전
사전 설정의 종류: 레이아웃, 테마, 위젯 설정, 레이아웃 + 데이터.
Versioning: 'semver' 체계 및 마이그레이션 (필드 맵, 기본값).
적용하기 전에 미리 보기 (S)
스코프 사전 설정: 개인, 팀, 글로벌; 읽기/편집 권한.
내보내기/가져오기: JSON/YAML, 체크섬 서명, 버전 호환성 검사.
9) 접근성 (A11y) 및 키보드
전체 키보드 DnD:- '입력/공간' -전송을 시작합니다. 화살표-그리드 간격으로 이동; '시프트' + 화살표-가속 간격; 'Esc' -취소.
- 'Śl/Cmd + G' - 그룹; 그룹화되지 않은 '차이점/Cmd + 시프트 + G' -
- 'Alt' -일시적으로 그리드로 스냅을 끄십시오.
- 음성 연기 SR: "(x, y) 로 이동 고집: 켜라. 갈등: 예/아니요 ".
- 포커스 링, 큰 정류장 핸들, 설명이있는 드롭 존.
10) 터치 및 모바일 패턴
DnD 시작을위한 롱 프레스 (300-500 ms).
증가 된 대상 (최소 40-48 px).
적응 형 도구 모음 (하단 도크).
편집 모드: 가장자리로 이동할 때 캔버스 스크롤 잠금, 수직 자동 스크롤.
11) 위젯의 동작 (실행 가능한 위젯)
내장 CTA (버튼), 컨텍스트 메뉴, 드래그 클론 (Alt- 헬드 복제).
위젯에 대한 "빠른 사전 설정" (밀도, 전설, 색 구성표).
상태: 로딩/빈/오류, 보안 스터브 ("데이터가 지연되었습니다").
12) 협업 및 출판
실시간: CRDT (예: Yjs) 또는 OT (Quill 접근) -참가자 커서, 그룹 잠금 장치.
권리: '소유자', '편집자', '뷰어'; 불변의 스냅 샷을 게시합니다.
스트림: 초안 → 검토 → 출판; 변경 사항 비교 (diff 레이아웃).
13) 실행 취소/다시 실행 및 자동 저장
명령 버스: 각 작업은 'do/undo' 명령입니다.
클라이언트에 로그 (in-memory + 주기적 지속), 길이 제한.
자동 저장: "저장 된" 표시기가있는 N 초/' 유휴 '
14) 시뮬레이션 및 디자인 토큰
json
{
"themeId": "light-pro",
"tokens": {
"fontScale": { "h1": 24, "h2": 18, "body": 14 },
"radius": 12,
"elevation": "soft",
"palette": { "primary": "#3366FF", "critical": "#E53935" }
}
}레이아웃을 다시 계산하지 않고 테마를 전환합니다 (시각적 토큰 만 해당).
AA/AAA 대비, 고 대조 모드, 올바른 회색의 어두운 테마.
15) 성능
레이어 렌더링 (복잡한 그래프의 경우 캔버스/웹글, 크롬의 경우 DOM).
목록/테이블 가상화, 스로틀 '드래그' (16ms), 요청 애니메이션 프레임.
Diff 렌더링: 수정 된 위젯 만 다시 그립니다.
캐시 계산 충돌 및 지침.
16) 콘텐츠 보안 및 보호
HTML을 위한 Sunbox (iframe, CSP, 'sandbox' 플래그).
드롭 제한: 화이트리스트 유형 (파일, 링크, JSON 사전 설정); 크기와 내용 확인.
사전 설정 권한 (RBAC/ABAC), 수출/수입 감사.
17) 위젯 API (계약)
ts interface Widget {
id: string;
type: string;
pos: { x:number; y:number; w:number; h:number; z:number };
constraints?: { minW?:number; minH?:number; maxW?:number; maxH?:number; lockAspect?:boolean };
props: Record<string, unknown>;
validate? (props): { ok: boolean; errors?: string[] };
onDrop? (dataTransfer): DropResult ;//support for external drop onAction? (actionId: string, payload?: any): void;
}수명주기 이벤트는 '마운트', '크기 조정', '시각 변화' 입니다.
출판 전의 소품 검증.
18) 수입/수출 및 마이그레이션
수출: '그리드', '위젯', '테마', '메타'.
가져오기: 스키마 버전 확인, 자동 마이그레이션 (필드 맵/기본값), 보고.
무결성을 보장하기 위해 해시로 잠금 파일을 사전 설정합니다.
19) 핫키 (권장)
내비게이션: '증거가 없습니다' - 이동; '이동' + 화살표-빠른 단계.
수정: 'Alt' + 화살표.
작업: 'www/Cmd + D' - 중복; 'Śl/Cmd + G' - 그룹; 그룹화되지 않은 '차이점/Cmd + 시프트 + G' -
레벨: '['/']' -z 인덱스에서 뒤/앞으로.
실행 취소/다시 실행: '
사전 설정: 'www/Cmd + 1.. 9 '-저장된 것을 신속하게 적용하십시오.
20) UX 패턴
첫 번째 출시시 빠른 가이드 (3-5 단계의 마이크로 온 보드).
그리드 모드: 토글 "쇼/숨기기 그리드".
충돌에 대한 인라인 힌트 ("사용할 수 없음: 최소 위젯 폭 = 3").
레이아웃 기록: 이전 버전으로 돌아갑니다.
21) 테스트 계획
단위: 충돌 계산, 스냅, 제약 유효성 검사기.
통합: DnD 마우스/탭/키보드; 그룹; 컨테이너.
E2E: 대시 보드를 처음부터 조립하고 사전 설정을 적용하고 출판, 수출/수입합니다.
혼돈: 지연, 연결 상실 (실시간), 권리 상충.
A11y: 키보드 스크립트, SR 음성 연기, 대비.
22) 구현 점검표
- 그리드/중단 점 및 스냅 설정
- 수정/그룹/정렬 작업 및 테스트
- 키보드 DnD 및 스크린 팁 활성화
- , 실행 취소/재실행, 레이아웃 기록
- 사전 설정: 버전, 권리, 수출/수입
- 테마 및 디자인 토큰, 대조 모드
- 실시간 협업 및 갈등 해결
- 드롭 제한, 파일 검증, 샌드 박스 HTMLName
- 측정: 채택, 첫 번째 배치 시간, 충돌 오류
23) 미니 -FAQ
왜 자유 좌표가 아닌 그리드 만 있습니까?
그리드는 정렬, 코로나 바이러스, 사전 설정된 이식성 및 성능을 단순화합니다.
중단 점에 대해 다른 레이아웃을 저장하는 방법은 무엇
각 위젯에는 중단 점 (데스크톱/태블릿/모바일) 에 자동 폴백이있는 'pos' 가 있습니다.
협업을 위해 무엇을 선택해야합니까-OT 또는 CRDT?
CRDT는 오프라인/충돌이 더 쉽습니다. OT-선형 텍스트 연산에 적합합니다. 레이아웃의 경우 CRDT가 더 자주 사용됩니다.
합계
좋은 드래그 및 드롭 위젯은 "드래그 앤 드롭" 이 아닙니다. "엄격한 그리드 및 스냅, 편리한 그룹 및 정렬, 키보드 접근성, 버전 및 수출을 통한 안정적인 사전 설정, 안전한 출판물 및 협업. 안정적인 데이터 모델, 잘 생각되는 UX 및 테스트 계획을 중심으로이를 구축하면 생성자는 컨텐츠 및 명령의 성장에 빠르고 이해하기 쉽고 저항 할 수 있습니다.