fix(cupang): 센터 분배를 마우스 기반 드래그로 교체 (웨일 대응)
웨일에서 카드를 눌러 움직여도 드래그 미리보기조차 생기지 않았다 = HTML5 네이티브 DnD 가 시작 자체를 못 한 것. 브라우저 구현에 기대는 draggable/dragstart 를 걷어내고 마우스 이벤트로 직접 구현했다. - mousedown 후 4px 이상 이동하면 드래그 시작, 카드 복제본(고스트)이 커서를 따라온다. 커서 아래 센터 패널은 elementFromPoint 로 찾아 강조. - mouseup 위치의 센터에 놓으면 수량 대화상자가 열린다. ③ 카드 여백에 놓아도 센터가 하나면 그 센터로, ③ 밖이면 안내만 띄우고 담지 않는다. - Esc 로 드래그 취소. 카드 위에서 손을 뗀 경우에만 뒤따르는 click 을 1회 무시해, 드래그 후에도 클릭 경로가 막히지 않는다. tests/js: 드래그 시작 임계값·고스트 생성/제거·대상 강조·여백 드롭· ③ 밖 드롭·클릭 대체 경로까지 마우스 이벤트로 검증. 전체 통과. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
+19
-3
@@ -596,13 +596,29 @@
|
||||
}
|
||||
|
||||
/* ② 요약: 카드가 드래그 가능함을 알린다 */
|
||||
.cpg-sum-prod[draggable="true"], .cpg-box-card[draggable="true"] { cursor: grab; }
|
||||
.cpg-sum-prod[draggable="true"]:hover, .cpg-box-card[draggable="true"]:hover {
|
||||
.cpg-sum-prod.is-draggable, .cpg-box-card.is-draggable { cursor: grab; }
|
||||
.cpg-sum-prod.is-draggable:hover, .cpg-box-card.is-draggable:hover {
|
||||
border-color: var(--color-rich-black);
|
||||
}
|
||||
.cpg-sum-prod.is-dragging, .cpg-box-card.is-dragging { opacity: .45; }
|
||||
.cpg-sum-prod.is-dragging, .cpg-box-card.is-dragging { opacity: .35; }
|
||||
.cpg-sum-prod.is-done, .cpg-box-card.is-done { opacity: .5; }
|
||||
|
||||
/* 커서를 따라다니는 복제 카드 */
|
||||
body.cpg-dragging { cursor: grabbing; user-select: none; }
|
||||
.cpg-drag-ghost {
|
||||
position: fixed;
|
||||
z-index: 1300;
|
||||
pointer-events: none;
|
||||
opacity: .9;
|
||||
max-width: 320px;
|
||||
background: var(--color-canvas-white);
|
||||
border: 1px solid var(--color-rich-black);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
|
||||
transform: rotate(-1.5deg);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* ③ 센터 분배 */
|
||||
.cpg-dist-list {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user