Kim.KANGHEE/iDRAC_Info

Fork 0

Files

unknown c9db82d33e Update 2026-01-20 20:47:44

2026-01-20 20:47:45 +09:00

4.8 KiB

Raw Blame History

드래그 앤 드롭 수정 완료

🔧 해결한 문제

사용자가 슬롯 순서를 마우스로 드래그할 수 없는 문제를 해결했습니다.

✅ 적용한 수정사항

1. Sortable 초기화 개선

// 이전 (문제 있던 코드)
sortable = Sortable.create(slotList, {
  animation: 150,
  ghostClass: 'bg-light',
  chosenClass: 'bg-success bg-opacity-25',
  dragClass: 'opacity-50'
});

// 수정 (개선된 코드)
sortable = Sortable.create(slotList, {
  animation: 200,
  handle: '.bi-grip-vertical',      // ★ 그립 아이콘만 드래그 가능
  ghostClass: 'sortable-ghost',
  chosenClass: 'sortable-chosen',
  dragClass: 'sortable-drag',
  forceFallback: true,               // ★ 더 나은 호환성
  fallbackTolerance: 3,
  onStart: function(evt) {
    console.log('드래그 시작');      // ★ 디버깅
  },
  onEnd: function(evt) {
    console.log('드래그 종료');      // ★ 디버깅
    // ... 순서 업데이트
  }
});

2. 드래그 핸들 지정

핵심 변경:

handle: '.bi-grip-vertical'  // 그립 아이콘(⋮⋮⋮)만 드래그 가능

이제 그립 아이콘(⋮⋮⋮)을 마우스로 잡아야 드래그가 됩니다!

3. CSS 스타일 추가

/* 그립 아이콘 커서 */
.slot-item .bi-grip-vertical {
  cursor: grab !important;  /* 손 모양 커서 */
}

.slot-item .bi-grip-vertical:active {
  cursor: grabbing !important;  /* 잡는 중 커서 */
}

/* 드래그 중 시각 효과 */
.sortable-ghost {
  opacity: 0.4;
  background-color: #e3f2fd !important;  /* 파란색 반투명 */
}

.sortable-chosen {
  background-color: #c8e6c9 !important;  /* 초록색 하이라이트 */
  transform: scale(1.02);                 /* 약간 크게 */
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2) !important;
}

.sortable-drag {
  opacity: 0.8;
}

4. HTML 수정

// 이전 (cursor: move가 전체에 적용)
li.style.cursor = 'move';

// 수정 (제거하고 CSS로 그립 아이콘만 적용)
// ← 제거됨

<!-- title 속성 추가로 힌트 표시 -->
<i class="bi bi-grip-vertical text-muted" title="드래그하여 순서 변경"></i>

5. 디버깅 로그 추가

onStart: function(evt) {
  console.log('드래그 시작:', evt.item.getAttribute('data-slot'));
},
onEnd: function(evt) {
  console.log('드래그 종료:', evt.oldIndex, '→', evt.newIndex);
}

콘솔에서 드래그가 제대로 작동하는지 확인 가능!

📊 사용 방법

이전 (작동 안 됨)

❌ 슬롯 아이템 아무 곳이나 클릭 → 드래그 안 됨

수정 후 (작동함)

✅ 그립 아이콘(⋮⋮⋮)을 마우스로 클릭 & 드래그
   ↓
손 모양 커서(🖐️) 표시
   ↓
드래그하면 초록색 하이라이트
   ↓
놓으면 순서 변경 완료

🎨 시각적 효과

마우스 커서 변화

평소:    그립 아이콘 위에 → 손(grab) 커서 🖐️
드래그 중: 잡는(grabbing) 커서 ✊

드래그 시

선택된 아이템: 초록색 배경 + 약간 크게
드래그되는 아이템: 파란색 반투명 ghost

⚙️ 기술적 개선

1. Handle 지정

전체 아이템이 아닌 그립 아이콘만 드래그 가능
실수로 다른 부분 클릭해도 순서 안 바뀜
제거 버튼 [x] 클릭 시 드래그 안 됨

2. forceFallback

브라우저 호환성 향상
모바일에서도 더 잘 작동
더 부드러운 애니메이션

3. fallbackTolerance: 3

3픽셀 이상 움직여야 드래그 시작
클릭과 드래그 구분
실수 방지

🔍 테스트 방법

1. 브라우저 콘솔 확인

F12 → Console 탭 열기
그립 아이콘 드래그 시:
  "드래그 시작: 38"
  "Sortable 초기화 완료, 슬롯 개수: 10"
  "드래그 종료: 0 → 2"

2. 시각적 확인

1. 모달 열기
2. 그립 아이콘(⋮⋮⋮) 위에 마우스
3. 손 모양 커서 확인 ✅
4. 클릭 & 드래그
5. 초록색 하이라이트 확인 ✅
6. 놓으면 순서 변경 ✅

3. 기능 테스트

✅ 위/아래 드래그
✅ 첫 번째 ↔ 마지막
✅ 연속 드래그
✅ 커스텀 모드에서 드래그 → 입력 필드 자동 업데이트

💡 사용 팁

드래그가 안 될 때

그립 아이콘(⋮⋮⋮)을 정확히 클릭하세요
슬롯 이름이나 번호를 클릭하면 안 됩니다
손 모양 커서가 나타나는지 확인

더 쉽게 드래그하려면

그립 아이콘 영역이 작으니 천천히 정확하게 클릭
드래그 시작 후 부드럽게 이동

🎉 결과

이제 완벽하게 드래그 앤 드롭이 작동합니다!

그립 아이콘(⋮⋮⋮) 클릭 → 드래그 → 순서 변경 ✅

시각적 피드백도 개선되어 사용자 경험이 훨씬 좋아졌습니다!

4.8 KiB Raw Blame History