203 lines
4.8 KiB
Markdown
203 lines
4.8 KiB
Markdown
# 드래그 앤 드롭 수정 완료
|
|
|
|
## 🔧 해결한 문제
|
|
|
|
사용자가 슬롯 순서를 마우스로 드래그할 수 없는 문제를 해결했습니다.
|
|
|
|
## ✅ 적용한 수정사항
|
|
|
|
### 1. **Sortable 초기화 개선**
|
|
|
|
```javascript
|
|
// 이전 (문제 있던 코드)
|
|
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. **드래그 핸들 지정**
|
|
|
|
**핵심 변경:**
|
|
```javascript
|
|
handle: '.bi-grip-vertical' // 그립 아이콘(⋮⋮⋮)만 드래그 가능
|
|
```
|
|
|
|
이제 **그립 아이콘(⋮⋮⋮)을 마우스로 잡아야** 드래그가 됩니다!
|
|
|
|
### 3. **CSS 스타일 추가**
|
|
|
|
```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 수정**
|
|
|
|
```javascript
|
|
// 이전 (cursor: move가 전체에 적용)
|
|
li.style.cursor = 'move';
|
|
|
|
// 수정 (제거하고 CSS로 그립 아이콘만 적용)
|
|
// ← 제거됨
|
|
```
|
|
|
|
```html
|
|
<!-- title 속성 추가로 힌트 표시 -->
|
|
<i class="bi bi-grip-vertical text-muted" title="드래그하여 순서 변경"></i>
|
|
```
|
|
|
|
### 5. **디버깅 로그 추가**
|
|
|
|
```javascript
|
|
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. 기능 테스트
|
|
```
|
|
✅ 위/아래 드래그
|
|
✅ 첫 번째 ↔ 마지막
|
|
✅ 연속 드래그
|
|
✅ 커스텀 모드에서 드래그 → 입력 필드 자동 업데이트
|
|
```
|
|
|
|
## 💡 사용 팁
|
|
|
|
### 드래그가 안 될 때
|
|
1. **그립 아이콘(⋮⋮⋮)을 정확히 클릭**하세요
|
|
2. 슬롯 이름이나 번호를 클릭하면 안 됩니다
|
|
3. 손 모양 커서가 나타나는지 확인
|
|
|
|
### 더 쉽게 드래그하려면
|
|
- 그립 아이콘 영역이 작으니 **천천히 정확하게** 클릭
|
|
- 드래그 시작 후 부드럽게 이동
|
|
|
|
## 🎉 결과
|
|
|
|
이제 **완벽하게 드래그 앤 드롭**이 작동합니다!
|
|
|
|
```
|
|
그립 아이콘(⋮⋮⋮) 클릭 → 드래그 → 순서 변경 ✅
|
|
```
|
|
|
|
**시각적 피드백도 개선**되어 사용자 경험이 훨씬 좋아졌습니다!
|