vue 목록 드래그 정렬 기능 구현

일상적인 개발 에서 특히 관리 단 은 드래그 정렬 을 실현 하 는 효 과 를 자주 볼 수 있다.이곳 은 간단 한 실현 방안 을 제공한다.
이 예 는 vuecli 3 기반 입 니 다.
우선,우 리 는 먼저 js 원생 드래그 사건 을 알 아 보 자.
드래그 대상 에 이벤트 발동 (원본 요소):

ondragstart - 사용자 가 원 소 를 드래그 하기 시 작 했 을 때 촉발 합 니 다

4

ondrag-원소 가 끌 리 고 있 을 때 촉발 합 니 다

ondragend-사용자 가 원 소 를 드래그 한 후 촉발 합 니 다대상 을 풀 때 발동 하 는 이벤트:

ondragenter - 마우스 로 끌 린 대상 이 용기 범위 내 에 들 어 갈 때 이 사건 을 촉발 합 니 다

ondragover - 끌 린 대상 이 다른 대상 용기 범위 내 에서 끌 렸 을 때 이 사건 을 촉발 합 니 다

ondragleave - 마우스 로 끌 린 대상 이 용기 범 위 를 벗 어 날 때 이 사건 을 촉발 합 니 다

ondrop - 드래그 중 마우스 단 추 를 눌 렀 을 때 이 이벤트 가 발생 합 니 다.

js 의 네 이 티 브 드래그 이 벤트 를 기반 으로 이번 드래그 정렬 의 원 리 는 다음 과 같 습 니 다.마우스 가 목록 의 한 항목 을 누 르 고 드래그 를 시작 할 때 ondragstart 이 벤트 를 촉발 하여 이 드래그 항목 을 변수 로 기록 합 니 다.
이 어 끌 어 당 기 는 과정 에서 이 끌 어 당 기 는 항목 이 목록 의 다른 항목 을 거 쳤 을 때 ondragenter 이벤트 가 발생 합 니 다.이 끌 어 당 기 는 항목 이 마지막 으로 거 친 목록 의 다른 항목 의 데 이 터 를 기록 하고 마지막 으로 ondragend 이벤트 에 기록 합 니 다.
초기 ondragstart 이벤트 기록 의 드래그 항목 을 삭제 하고 삭 제 된 데 이 터 를 ondragenter 이벤트 의 마지막 기록 위치 에 삽입 하여 드래그 정렬 을 완료 합 니 다.
구체 적 인 코드 는 다음 과 같다.

<template>
  <div class="test_wrapper" @dragover="dragover($event)">
    <transition-group class="transition-wrapper" name="sort">
      <div v-for="(item) in dataList" :key='item.id' class="sort-item"
        :draggable="true"
        @dragstart="dragstart(item)"
        @dragenter="dragenter(item,$event)"
        @dragend="dragend(item,$event)"
        @dragover="dragover($event)"
      >
        {{ item.label }}
      </div>
    </transition-group>
  </div>
</template>

<script lang="ts">
  import {Vue, Component, Prop, Watch} from "vue-property-decorator";
  import { addWebsite } from '@/api'
  @Component({
    components: {}
  })
  export default class Test extends Vue {

    oldData: any = null; //            
    newData: any = null; //        

    //     
    dataList:any = [
      { id:1,label:'    ' },
      { id:2,label:'    ' },
      { id:3,label:'    ' },
      { id:4,label:'    ' },
    ];

    dragstart(value: any) {
      this.oldData = value
    }

    //          
    dragenter(value: any, e: any) {
      this.newData = value
      e.preventDefault()
    }

    //       
    dragend(value: any, e: any) {
      if (this.oldData !== this.newData) {
        let oldIndex = this.dataList.indexOf(this.oldData)
        let newIndex = this.dataList.indexOf(this.newData)
        let newItems = [...this.dataList]
        //       
        newItems.splice(oldIndex, 1)
        //               
        newItems.splice(newIndex, 0, this.oldData)
        this.dataList = [...newItems]
      }
    }


    //     （                 ）
    dragover(e: any) {
      e.preventDefault()
    }


  };
</script>

달리
드래그 된 애니메이션 효 과 를 실현 하기 위해 transition-group 구성 요 소 를 사 용 했 습 니 다.위 코드 와 같이 transition-group 구성 요소 의 속성 name 을'sort'로 설정 합 니 다.다음 코드 를 추가 합 니 다.

    .sort-move {
      transition: transform 0.3s;
    }

       메모:transition 이 효과 가 나타 나 도록 v-for 렌 더 링 데이터 목록 에 key 속성 이 있어 야 하 며 이 key 속성 은 index 로 설정 할 수 없습니다. 
최종 효 과 는 다음 과 같다.

이상 은 vue 가 목록 드래그 정렬 기능 을 실현 하 는 상세 한 내용 입 니 다.vue 드래그 정렬 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!