[HTML5] 드래그 앤 드롭(Drag and Drop) - 리스트 순서 변경

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 이벤트 핸들러는 드래그가 완료될 때 호출되어 순서를 업데이트합니다. 드래그를 시작한 인덱스와 드래그 대상의 인덱스를 사용하여 배열을 재정렬합니다.