drag and drop 이벤트
- dragStart
dragStart 이벤트는 드래그 작업이 시작될 때 발생합니다. 요소가 드래그되고 있는 동안 한 번만 발생합니다.
주로 이 이벤트를 사용하여 드래그 데이터를 설정하고, 드래그 중인 요소의 스타일을 변경하거나 사용자 지정 드래그 피드백을 제공하는 데 사용됩니다.
- dragEnter
dragEnter 이벤트는 드래그된 요소가 들어갈 수 있는 다른 요소 위로 이동할 때 발생합니다.
주로 이 이벤트를 사용하여 드롭 대상 요소에 대한 피드백을 제공하거나 드래그된 요소가 들어갈 수 있는 영역을 하이라이트하는 데 사용됩니다.
- dragLeave
dragLeave 이벤트는 드래그된 요소가 들어갈 수 있는 영역에서 떠날 때 발생합니다.
주로 이 이벤트를 사용하여 드롭 대상 요소를 다시 기본 상태로 되돌리거나 드롭 대상 영역에서 나갔을 때 필요한 작업을 수행합니다.
- dragOver
dragOver 이벤트는 드래그된 요소가 들어갈 수 있는 영역 위에서 움직일 때 계속해서 발생합니다.
주로 이 이벤트를 사용하여 드롭 대상 영역에서 드래그된 요소를 드롭할 수 있는지 확인하고, 드래그 앤 드롭 동작을 사용자 지정하거나 중단하기 위해 사용됩니다.
- dragEnd
dragEnd 이벤트는 드래그 작업이 완료될 때 즉 드래그된 요소가 드롭되거나 취소되었을 때 발생합니다.
주로 이 이벤트를 사용하여 드래그 작업 종료 후 정리 작업을 수행하거나 사용자 지정 동작을 수행하는 데 사용됩니다.
- drop
drop 이벤트는 드래그된 요소가 드롭되었을 때 발생합니다.
주로 이 이벤트를 사용하여 드롭된 데이터를 처리하고 해당 동작을 수행하는 데 사용됩니다.
설정 방법
(리스트 순서 변경 예제)
- html
<ul>
<li
v-for="(item, idx) in itemList"
:key="item.key"
draggable="true"
@dragstart="dragStart(idx)"
@dragover.prevent
@dragenter.prevent="dragEnter(idx)"
@drop.prevent="dragDrop(idx)"
>
<div
@contextmenu.prevent="showContextMenu(item.key)"
@dblclick="displayDialog(item.key)"
@click="itemClick($event, item)"
>
<span
class="title"
:title="item.title"
>{{ item.title }}</span
>
</div>
</li>
</ul>
draggable="true" 속성을 설정합니다.
- javaScript
dragStart(index) {
this.dragStartIndex = index;
},
dragEnter(index) {
this.dragEnterIndex = index;
},
dragDrop(idx) {
if (this.dragStartIndex !== null && this.dragEnterIndex !== null) {
let itemList = this.itemList;
const movedItem = itemList.splice(this.dragStartIndex, 1)[0];
itemList.splice(idx4, 0, movedItem);
this.dragStartIndex = null;
this.dragEnterIndex = null;
}
},
@dragstart 이벤트 핸들러는 드래그가 시작될 때 호출되며, 현재 드래그하는 항목의 인덱스를 저장합니다.
@dragover.prevent와 @dragenter.prevent 이벤트 핸들러는 드래그 중에 호출되어 드롭을 허용하고 드래그 대상의 인덱스를 저장합니다.
@dragleave 이벤트 핸들러는 요소를 떠났을 때 호출되어 드래그 대상의 인덱스를 초기화합니다.
@drop.prevent 이벤트 핸들러는 드래그가 완료될 때 호출되어 순서를 업데이트합니다. 드래그를 시작한 인덱스와 드래그 대상의 인덱스를 사용하여 배열을 재정렬합니다.
'Frontend > html' 카테고리의 다른 글
[HTML] 자바스크립트 임포트 위치 (0) | 2024.07.05 |
---|---|
기본 contextmenu 안뜨게 / oncontextmenu (0) | 2021.11.13 |
html radio버튼 (0) | 2021.11.13 |